apache-superset · gunjitk · Dec 31, 2019
@@ -0,0 +1,31 @@
+## @superset-ui/legacy-plugin-grouped_column_line_chart
+
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-table&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-table)
+
+This plugin provides Grouped Column Line Chart for Superset.
+
+### Usage
+
+Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
+
+```js
+import TableChartPlugin from '@superset-ui/legacy-plugin-grouped-column-line-chart';
+
+new TableChartPlugin()
+  .configure({ key: 'grouped_column_line_chart' })
+  .register();
+```
+
+Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/) for more details.
+
+```js
+<SuperChart
+  chartType="grouped_column_line_chart"
+  width={600}
+  height={600}
+  formData={...}
+  queryData={{
+    data: {...},
+  }}
+/>
+```
@@ -0,0 +1,44 @@
+{
+  "name": "@superset-ui/legacy-plugin-grouped-column-line-chart",
+  "version": "0.1.1",
+  "description": "Superset Legacy Chart - Grouped Chart",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui-plugins.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui-plugins/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui-plugins#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@data-ui/xy-chart": "^0.0.84",
+    "@data-ui/theme": "^0.0.82",
+    "@vx/legend": "^0.0.192",
+    "@vx/responsive": "^0.0.192",
+    "@vx/scale": "^0.0.192",
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.12.0",
+    "@superset-ui/color": "^0.12.0",
+    "@superset-ui/translation": "^0.12.0",
+    "react": "^15 || ^16"
+  }
+}
@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+.superset-legacy-grouped-chart {
+    margin-left: 2%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
@@ -0,0 +1,164 @@
+/**
+ * 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 sort-keys */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { XYChart, LineSeries, CrossHair, BarSeries, XAxis, YAxis } from '@data-ui/xy-chart';
+import { chartTheme } from '@data-ui/theme';
+import { LegendOrdinal } from '@vx/legend';
+import { scaleOrdinal } from '@vx/scale';
+import { CategoricalColorNamespace } from '@superset-ui/color';
+import WithLegend from './WithLegend';
+import './GroupedChart.css';
+
+const propTypes = {
+  className: PropTypes.string,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.number),
+    }),
+  ).isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  colorScheme: PropTypes.string,
+  normalized: PropTypes.bool,
+  binCount: PropTypes.number,
+  opacity: PropTypes.number,
+  xAxisLabel: PropTypes.string,
+  yAxisLabel: PropTypes.string,
+};
+const defaultProps = {
+  className: '',
+  colorScheme: '',
+  normalized: false,
+  binCount: 15,
+  opacity: 1,
+  xAxisLabel: '',
+  yAxisLabel: '',
+};
+
+class GroupedChart extends React.PureComponent {
+  render() {
+    const {
+      className,
+      data,
+      width,
+      height,
+      binCount,
+      colorScheme,
+      normalized,
+      opacity,
+      xAxisLabel,
+      yAxisLabel,
+    } = this.props;
+
+    const colorFn = CategoricalColorNamespace.getScale(colorScheme);
+    const keys = data.map(d => d.key);
+    const colorScale = scaleOrdinal({
+      domain: keys,
+      range: keys.map(colorFn),
+    });
+
+    return (
+      <WithLegend
+        className={`superset-legacy-grouped-chart ${className}`}
+        width={width}
+        height={height}
+        position="top"
+        renderLegend={({ direction }) => (
+          <LegendOrdinal
+            scale={colorScale}
+            direction={direction}
+            shape="rect"
+            labelMargin="0 15px 0 0"
+          />
+        )}
+        renderChart={parent => (
+          <XYChart
+            width={parent.width}
+            height={parent.height}
+            xScale={{ type: 'band', paddingInner: 0.15 }}
+            yScale={{ type: 'linear' }}
+            ariaLabel="Grouped Chart"
+            normalized={normalized}
+            binCount={binCount}
+            binType="numeric"
+            margin={{ top: 20, right: 20 }}
+            renderTooltip={({ event, datum, data, color }) => (
+              <div>
+                <strong style={{ color }}>{datum.label}</strong>
+                <div>
+                  <strong>x </strong>
+                  {datum.x}
+                </div>
+                <div>
+                  <strong>y </strong>
+                  {datum.y}
+                </div>
+              </div>
+            )}
+            valueAccessor={datum => datum}
+            theme={chartTheme}
+          >
+            {data.map(series => (series.renderas === "bar" ? (
+              <BarSeries
+              key={series.key}
+              animated
+              data={series.values}
+              fill={colorScale(series.key)}
+              fillOpacity={opacity}
+              />
+            ):(
+              <LineSeries
+              seriesKey={series.key}
+              data={series.values}
+              stroke={colorScale(series.key)}
+              strokeOpacity={opacity}
+              />
+            )))}
+            <XAxis label={xAxisLabel} />
+            <YAxis
+              label={yAxisLabel}
+              orientation="left"
+              tickFormat={(tick, tickIndex) => {
+                  if (tick >= 1000000000) {
+                    return (tick / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
+                  }
+                  if (tick >= 1000000) {
+                    return (tick / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+                  }
+                  if (tick >= 1000) {
+                    return (tick / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+                  } else {
+                    return tick;
+                  }
+              }} />
+            <CrossHair/>
+          </XYChart>
+        )}
+      />
+    );
+  }
+}
+
+GroupedChart.propTypes = propTypes;
+GroupedChart.defaultProps = defaultProps;
+
+export default GroupedChart;