Add compiled files

Author: Kevin Murek

.gitignore

@@ -21,15 +21,15 @@ logs/
 build/
 coverage/
 dist/
-esm/
-lib/
+#esm/ # Exclude the compiled files because I don't have time to find a better way right now
+#lib/
 public/
 node_modules/
 tmp/
 
 # Custom
-*.map
-*.min.js
+#*.map # Exclude the compiled files because I don't have time to find a better way right now
+#*.min.js
 test-changelog.md
 
 # Configs (provided by Nimbus)

packages/superset-ui-plugin-chart-discrete-bar/esm/DiscreteBarChart.js

@@ -0,0 +1,164 @@
+import _pt from "prop-types";
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import _ from 'lodash';
+import React from 'react';
+import { CategoricalColorNamespace } from '@superset-ui/color';
+import { getNumberFormatter } from '@superset-ui/number-format';
+import { AxisLeft, AxisBottom } from '@vx/axis';
+import { Grid } from '@vx/grid';
+import { Group } from '@vx/group';
+import { Bar } from '@vx/shape';
+import { scaleBand, scaleLinear } from '@vx/scale';
+import { Text } from '@vx/text';
+const {
+  getScale
+} = CategoricalColorNamespace;
+export default class DiscreteBarChart extends React.PureComponent {
+  getColor(value, colorScheme) {
+    const colorFn = getScale(colorScheme);
+    return colorFn(value.trim());
+  }
+
+  render() {
+    const {
+      height,
+      width,
+      colorScheme,
+      showBarValue,
+      orderBars,
+      xTicksLayout,
+      yAxisFormat
+    } = this.props;
+    let {
+      data
+    } = this.props; // Layout for x ticks
+
+    let tickAngle = 0;
+    let tickMargin = 0;
+    let tickAnchor = 'middle';
+
+    if (xTicksLayout === 'auto' || xTicksLayout === '45°') {
+      tickAngle = 45;
+      tickMargin = 100;
+      tickAnchor = 'start';
+    }
+
+    const margin = {
+      top: 30,
+      bottom: 30 + tickMargin,
+      left: 75,
+      right: 20
+    };
+    const formatter = getNumberFormatter(yAxisFormat);
+
+    if (orderBars) {
+      data = _.orderBy(data, ['key', 'asc']);
+    } // Then we'll create some bounds
+
+
+    const xMax = width - margin.left - margin.right;
+    const yMax = height - margin.top - margin.bottom; // We'll make some helpers to get at the data we want
+
+    const x = d => d.key;
+
+    const y = d => d.value; // And then scale the graph by our data
+
+
+    const xScale = scaleBand({
+      rangeRound: [0, xMax],
+      domain: data.map(x),
+      padding: 0.1
+    });
+    const yScale = scaleLinear({
+      rangeRound: [yMax, 0],
+      domain: [0, Math.max(...data.map(y))]
+    }); // Compose together the scale and accessor functions to get point functions
+
+    const compose = (scale, accessor) => data => scale(accessor(data));
+
+    const xPoint = compose(xScale, x);
+    const yPoint = compose(yScale, y);
+    return /*#__PURE__*/React.createElement("svg", {
+      width: width,
+      height: height
+    }, /*#__PURE__*/React.createElement(Group, {
+      top: margin.top,
+      left: margin.left
+    }, /*#__PURE__*/React.createElement(Grid, {
+      xScale: xScale // @ts-ignore
+      ,
+      yScale: yScale,
+      width: xMax,
+      height: yMax,
+      numTicksRows: 5
+    }), /*#__PURE__*/React.createElement(AxisLeft, {
+      scale: yScale,
+      top: 0,
+      left: 0,
+      hideTicks: true,
+      numTicks: 5 // @ts-ignore
+      ,
+      tickFormat: formatter,
+      tickLabelProps: (tickValue, index) => {
+        return {
+          fontFamily: 'Arial,sans-serif',
+          fontSize: 12,
+          textAnchor: 'end'
+        };
+      }
+    }), /*#__PURE__*/React.createElement(AxisBottom, {
+      scale: xScale,
+      top: yMax,
+      stroke: '#1b1a1e',
+      hideAxisLine: true,
+      hideTicks: true,
+      tickLabelProps: (tickValue, index) => {
+        return {
+          fontFamily: 'Arial,sans-serif',
+          fontSize: 12,
+          textAnchor: tickAnchor,
+          angle: tickAngle
+        };
+      }
+    }), /*#__PURE__*/React.createElement(Group, null, data.map((d, i) => {
+      const barHeight = yMax - yPoint(d);
+      return /*#__PURE__*/React.createElement("g", {
+        key: d.key
+      }, /*#__PURE__*/React.createElement(Bar, {
+        x: xPoint(d),
+        y: yMax - barHeight,
+        height: barHeight,
+        width: xScale.bandwidth() // fill={color(xPoint(d))}
+        ,
+        fill: this.getColor(x(d), colorScheme)
+      }), showBarValue && /*#__PURE__*/React.createElement(Text, {
+        x: xPoint(d) + xScale.bandwidth() / 2,
+        y: yMax - barHeight - 10,
+        textAnchor: "middle",
+        style: {
+          fontFamily: 'Arial,sans-serif',
+          fontSize: 12,
+          textAnchor: 'middle'
+        }
+      }, formatter(d.value)));
+    }))));
+  }
+
+}
+
+_defineProperty(DiscreteBarChart, "propTypes", {
+  height: _pt.number.isRequired,
+  width: _pt.number.isRequired,
+  colorScheme: _pt.string.isRequired,
+  data: _pt.arrayOf(_pt.shape({
+    key: _pt.string.isRequired,
+    value: _pt.number.isRequired
+  })).isRequired,
+  showBarValue: _pt.bool.isRequired,
+  orderBars: _pt.bool.isRequired,
+  showLegend: _pt.bool.isRequired,
+  xTicksLayout: _pt.string.isRequired,
+  yAxisFormat: _pt.string.isRequired
+});

packages/superset-ui-plugin-chart-discrete-bar/esm/index.js

@@ -0,0 +1,49 @@
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
+import transformProps from './transformProps';
+
+function nonEmpty(v) {
+  if (v === null || v === undefined || v === '' || Array.isArray(v) && v.length === 0) {
+    return t('cannot be empty');
+  }
+
+  return false;
+}
+
+const metadata = new ChartMetadata({
+  description: '',
+  name: t('Discrete bar chart'),
+  thumbnail: ''
+});
+const controlPanel = {
+  controlPanelSections: [{
+    label: t('Query'),
+    expanded: true,
+    controlSetRows: [['metric'], ['adhoc_filters'], ['groupby'], ['row_limit']]
+  }, {
+    label: t('Chart Options'),
+    expanded: true,
+    controlSetRows: [['color_scheme', 'label_colors'], ['show_bar_value'], ['order_bars'], ['y_axis_format']]
+  }, {
+    label: t('X Axis'),
+    expanded: true,
+    controlSetRows: [['x_ticks_layout']]
+  }],
+  controlOverrides: {
+    groupby: {
+      label: t('Series'),
+      validators: [nonEmpty]
+    }
+  }
+};
+export default class DiscreteBarChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      controlPanel,
+      loadChart: () => import('./DiscreteBarChart'),
+      metadata,
+      transformProps
+    });
+  }
+
+}

packages/superset-ui-plugin-chart-discrete-bar/esm/transformProps.js

@@ -0,0 +1,36 @@
+export default function transformProps(chartProps) {
+  const {
+    width,
+    height,
+    formData,
+    queryData
+  } = chartProps;
+  const {
+    bottomMargin,
+    colorPicker,
+    colorScheme,
+    leftMargin,
+    showBarValue,
+    orderBars,
+    showLegend,
+    xTicksLayout,
+    yAxisFormat
+  } = formData;
+  const {
+    data
+  } = queryData;
+  return {
+    width,
+    height,
+    data,
+    baseColor: colorPicker,
+    bottomMargin,
+    colorScheme,
+    leftMargin,
+    showBarValue,
+    orderBars,
+    showLegend,
+    xTicksLayout,
+    yAxisFormat
+  };
+}

packages/superset-ui-plugin-chart-discrete-bar/lib/DiscreteBarChart.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare type DiscreteBarDataPoint = {
+    key: string;
+    value: number;
+};
+export declare type DiscreteBarChartProps = {
+    height: number;
+    width: number;
+    colorScheme: string;
+    data: DiscreteBarDataPoint[];
+    showBarValue: boolean;
+    orderBars: boolean;
+    showLegend: boolean;
+    xTicksLayout: string;
+    yAxisFormat: string;
+};
+export declare type AxisTickAnchor = 'start' | 'middle' | 'end' | 'inherit';
+export default class DiscreteBarChart extends React.PureComponent<DiscreteBarChartProps> {
+    getColor(value: any, colorScheme: string): any;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=DiscreteBarChart.d.ts.map