Skip to content

Commit

Permalink
Merge pull request #847 from bytecodeio/bytecode_plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
eschutho authored Jan 30, 2024
2 parents 6a1ce6a + b782d9a commit 68fe17f
Show file tree
Hide file tree
Showing 15 changed files with 1,010 additions and 0 deletions.
45 changes: 45 additions & 0 deletions superset-frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions superset-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@
"@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
"@superset-ui/plugin-chart-period-over-period-kpi": "file:./plugins/plugin-chart-period-over-period-kpi",
"@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
"@types/d3-format": "^3.0.1",
"@visx/axis": "^3.0.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# custom-viz

This is the Custom Viz Superset Chart Plugin.

### Usage

To build the plugin, run the following commands:

```
npm ci
npm run build
```

Alternatively, to run the plugin in development mode (=rebuilding whenever changes are made), start the dev server with the following command:

```
npm run dev
```

To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `custom-viz` plugin and `superset` repos are in the same root directory) and run
```
npm i -S ../../custom-viz
```

If your Superset plugin exists in the `superset-frontend` directory and you wish to resolve TypeScript errors about `@superset-ui/core` not being resolved correctly, add the following to your `tsconfig.json` file:

```
"references": [
{
"path": "../../packages/superset-ui-chart-controls"
},
{
"path": "../../packages/superset-ui-core"
}
]
```

You may also wish to add the following to the `include` array in `tsconfig.json` to make Superset types available to your plugin:

```
"../../types/**/*"
```

Finally, if you wish to ensure your plugin `tsconfig.json` is aligned with the root Superset project, you may add the following to your `tsconfig.json` file:

```
"extends": "../../tsconfig.json",
```

After this edit the `superset-frontend/src/visualizations/presets/MainPreset.js` and make the following changes:

```js
import { CustomViz } from 'custom-viz';
```

to import the plugin and later add the following to the array that's passed to the `plugins` property:
```js
new CustomViz().configure({ key: 'custom-viz' }),
```

After that the plugin should show up when you run Superset, e.g. the development server:

```
npm run dev-server
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "@superset-ui/plugin-chart-period-over-period-kpi",
"version": "0.1.0",
"description": "Period Over Period KPI",
"sideEffects": false,
"main": "lib/index.js",
"module": "esm/index.js",
"files": [
"esm",
"lib"
],
"private": true,
"keywords": [
"superset"
],
"author": "Bytecodeio",
"license": "Apache-2.0",
"publishConfig": {
"access": "public"
},
"dependencies": {
"moment": "^2.30.1"
},
"peerDependencies": {
"@superset-ui/chart-controls": "*",
"@superset-ui/core": "*",
"react": "^16.13.1"
},
"devDependencies": {
"@types/jest": "^26.0.4",
"jest": "^26.6.3"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { useEffect, createRef } from 'react';
import {

Check failure on line 20 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `⏎··styled,⏎·` with `styled`
styled,
} from '@superset-ui/core';
import { PopKPIProps, PopKPIStylesProps } from './types';

// The following Styles component is a <div> element, which has been styled using Emotion
// For docs, visit https://emotion.sh/docs/styled

// Theming variables are provided for your use via a ThemeProvider
// imported from @superset-ui/core. For variables available, please visit
// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts

const Styles = styled.div<PopKPIStylesProps>`

Check failure on line 33 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Delete `⏎`
font-family: ${({ theme }) => theme.typography.families.sansSerif};
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: ${({ theme }) => theme.tdUnit * 4}px;
border-radius: ${({ theme }) => theme.tdUnit * 2}px;
height: ${({ height }) => height}px;
width: ${({ width }) => width}px;
`;

const BigValueContainer = styled.div`
font-size: ${props=> props.headerFontSize ? props.headerFontSize : 60}px;

Check failure on line 46 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `=>·props.headerFontSize·?·props.headerFontSize·:·60` with `·=>·(props.headerFontSize·?·props.headerFontSize·:·60)`
font-weight: ${({ theme }) => theme.typography.weights.normal};
text-align: center;
`;

const TableContainer = styled.div`
width: 100%;
display: table;
`

Check failure on line 54 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Insert `;`

const ComparisonContainer = styled.div`
display: table-row;
`;

const ComparisonValue = styled.div`
font-weight: ${({ theme }) => theme.typography.weights.light};
width: 33%;
display: table-cell;
font-size: ${props=> props.subheaderFontSize ? props.subheaderFontSize : 20}px;

Check failure on line 64 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `=>` with `·=>⏎···`
text-align: center;
`;

export default function PopKPI(props: PopKPIProps) {
const {
height,
width,
bigNumber,
prevNumber,
valueDifference,
percentDifference,
headerFontSize,
subheaderFontSize,
} = props;

const rootElem = createRef<HTMLDivElement>();

useEffect(() => {
const root = rootElem.current as HTMLElement;
});

return (
<Styles
ref={rootElem}
boldText={props.boldText}
headerFontSize={props.headerFontSize}
height={height}
width={width}
>

Check failure on line 94 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `⏎······<BigValueContainer·headerFontSize={headerFontSize}>{bigNumber}` with `······<BigValueContainer·headerFontSize={headerFontSize}>⏎········{bigNumber}⏎······`
<BigValueContainer headerFontSize={headerFontSize}>{bigNumber}</BigValueContainer>
<TableContainer>
<ComparisonContainer>
<ComparisonValue subheaderFontSize={subheaderFontSize}> #: {prevNumber}</ComparisonValue>

Check failure on line 98 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `·#:·{prevNumber}` with `⏎············{'·'}⏎············#:·{prevNumber}⏎··········`
<ComparisonValue subheaderFontSize={subheaderFontSize}> Δ: {valueDifference}</ComparisonValue>

Check failure on line 99 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `·Δ:·{valueDifference}` with `⏎············{'·'}⏎············Δ:·{valueDifference}⏎··········`
<ComparisonValue subheaderFontSize={subheaderFontSize}> %: {percentDifference}</ComparisonValue>

Check failure on line 100 in superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

View workflow job for this annotation

GitHub Actions / frontend-build

Replace `·%:·{percentDifference}` with `⏎············{'·'}⏎············%:·{percentDifference}⏎··········`
</ComparisonContainer>
</TableContainer>
</Styles>
);
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// eslint-disable-next-line import/prefer-default-export
export { default as PopKPIPlugin } from './plugin';
/**
* Note: this file exports the default export from PopKPI.tsx.
* If you want to export multiple visualization modules, you will need to
* either add additional plugin folders (similar in structure to ./plugin)
* OR export multiple instances of `ChartPlugin` extensions in ./plugin/index.ts
* which in turn load exports from CustomViz.tsx
*/
Loading

0 comments on commit 68fe17f

Please sign in to comment.