Merge pull request #74 from williaster/chris--series-onclick

[xy-chart] add <StackedAreaSeries /> and `onClick` support to all series

Author: williaster

packages/data-table/README.md

@@ -24,11 +24,3 @@ See the <a href="https://williaster.github.io/data-ui" target="_blank">@data-ui/
 npm install
 npm run dev # or 'npm run prod'
 ```
-
-## @data-ui packages
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/xy-chart" target="_blank">@data-ui/xy-chart</a>[![Version](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat)
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/histogram" target="_blank">@data-ui/histogram</a>[![Version](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat)
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/radial-chart" target="_blank">@data-ui/radial-chart</a> [![Version](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat)
-- @data-ui/data-table [![Version](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat)
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/data-ui-theme" target="_blank">@data-ui/theme</a> [![Version](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat)
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/demo" target="_blank">@data-ui/demo</a>

packages/data-ui-theme/README.md

@@ -6,11 +6,3 @@ This package exports theme variables that can be used by other packages. On the
 ```js
 import { font, svgFont, label, size, color, chartTheme } from `@data-ui/theme`;
 ```
-
-## @data-ui packages
-- [@data-ui/xy-chart](https://github.com/williaster/data-ui/tree/master/packages/xy-chart) [![Version](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat)
-- <a href="https://github.com/williaster/data-ui/tree/master/packages/histogram" target="_blank">@data-ui/histogram</a> [![Version](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/histogram.svg?style=flat)
-- [@data-ui/radial-chart](https://github.com/williaster/data-ui/tree/master/packages/radial-chart) [![Version](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat)
-- [@data-ui/data-table](https://github.com/williaster/data-ui/tree/master/packages/data-table) [![Version](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat)
-- @data-ui/theme [![Version](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat)](https://img.shields.io/npm/v/@data-ui/theme.svg?style=flat)
-- [@data-ui/demo](https://github.com/williaster/data-ui/tree/master/packages/demo)

packages/demo/README.md

@@ -1,9 +1,2 @@
 # @data-ui/demo
 Storybook of @data-ui examples. See it live at [williaster.github.io/data-ui](https://williaster.github.io/data-ui).
-
-## @data-ui packages
-- [@data-ui/xy-chart](https://github.com/williaster/data-ui/tree/master/packages/xy-chart) [![Version](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat-square)](https://img.shields.io/npm/v/@data-ui/xy-chart.svg?style=flat-square)
-- [@data-ui/radial-chart](https://github.com/williaster/data-ui/tree/master/packages/radial-chart) [![Version](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat-square)](https://img.shields.io/npm/v/@data-ui/radial-chart.svg?style=flat-square)
-- [@data-ui/data-table](https://github.com/williaster/data-ui/tree/master/packages/data-table) [![Version](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat-square)](https://img.shields.io/npm/v/@data-ui/data-table.svg?style=flat-square)
-- [@data-ui/theme](https://github.com/williaster/data-ui/tree/master/packages/theme)
-- @data-ui/demo

packages/demo/examples/01-xy-chart/CirclePackWithCallback.jsx

@@ -48,7 +48,6 @@ export default class CirclePackWithCallback extends React.Component {
 
         <CirclePackSeries
           data={circlePackData.concat(circlePackData)}
-          label="Circle time pack"
           size={d => d.r}
           pointComponent={RectPointComponent}
           layoutCallback={this.resizeCallback}

packages/demo/examples/01-xy-chart/LinkedXYCharts.jsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { utcFormat } from 'd3-time-format';
+
+import {
+  AreaSeries,
+  StackedBarSeries,
+  CrossHair,
+  IntervalSeries,
+  PatternLines,
+  XAxis,
+  XYChart,
+  theme,
+  withScreenSize,
+} from '@data-ui/xy-chart';
+
+const PATTERN_ID = 'linked_pattern';
+const formatDate = utcFormat('%Y');
+const generateY = () => Math.max(10, Math.random() * 50);
+
+const data = [
+  { x: new Date('2010-01-01 UTC'), y: generateY() },
+  { x: new Date('2011-01-01 UTC'), y: generateY() },
+  { x: new Date('2012-01-01 UTC'), y: generateY() },
+  { x: new Date('2013-01-01 UTC'), y: generateY() },
+  { x: new Date('2014-01-01 UTC'), y: generateY() },
+  { x: new Date('2015-01-01 UTC'), y: generateY() },
+  { x: new Date('2016-01-01 UTC'), y: generateY() },
+  { x: new Date('2017-01-01 UTC'), y: generateY() },
+  { x: new Date('2018-01-01 UTC'), y: generateY() },
+  { x: new Date('2019-01-01 UTC'), y: generateY() },
+  { x: new Date('2020-01-01 UTC'), y: generateY() },
+];
+
+const tickValues = data.map(d => d.x);
+
+const stackKeys = ['a', 'b', 'c'];
+const stackFills = theme.colors.categories.slice(2);
+
+const stackedData = data.map((d) => {
+  let total = 1;
+
+  return stackKeys.reduce((ret, key, i) => {
+    const fraction = i === stackKeys.length - 1 ? total : 0.33;
+    total -= fraction;
+    return { ...ret, [key]: fraction * ret.y };
+  }, d);
+});
+
+const getYForKey = (d, key) => {
+  const index = stackKeys.indexOf(key);
+  return stackKeys.slice(0, index + 1).reduce((sum, currKey) => sum + d[currKey], 0);
+};
+
+const areaChartProps = {
+  xScale: { type: 'time' },
+  yScale: { type: 'linear' },
+  margin: { top: 6, left: 16, right: 16, bottom: 24 },
+};
+
+const stackedChartProps = {
+  xScale: { type: 'band', paddingInner: 0.1 },
+  yScale: { type: 'linear' },
+  margin: { top: 6, left: 16, right: 16, bottom: 24 },
+};
+
+class LinkedXYCharts extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+
+    this.state = {
+      selectedDatum: null,
+      mousedOverDatum: null,
+      mousedOverKey: null,
+    };
+  }
+
+  onClick({ datum }) {
+    this.setState(({ selectedDatum }) => ({
+      selectedDatum: datum === selectedDatum ? null : datum,
+    }));
+  }
+
+  onMouseMove({ datum, seriesKey }) {
+    if (this.state.mousedOverDatum !== datum || this.state.mousedOverKey !== seriesKey) {
+      this.setState(() => ({ mousedOverDatum: datum, mousedOverKey: seriesKey }));
+    }
+  }
+
+  onMouseLeave() {
+    this.setState(() => ({ mousedOverDatum: null, mousedOverKey: null }));
+  }
+
+  render() {
+    const { screenWidth } = this.props; // eslint-disable-line react/prop-types
+    const { mousedOverDatum, mousedOverKey, selectedDatum } = this.state;
+    const width = Math.max(400, Math.min(700, screenWidth / 1.5));
+    const height = 100;
+
+    const intervalData = selectedDatum ? [
+      {
+        x0: selectedDatum.x,
+        x1: new Date(
+          new Date(selectedDatum.x).setFullYear(new Date(selectedDatum.x).getFullYear() + 1),
+        ),
+      },
+    ] : null;
+
+    const crossHairData = mousedOverDatum
+      ? { datum: { ...mousedOverDatum, y: mousedOverDatum[mousedOverKey] } }
+      : null;
+
+    const stackCrossHairData = mousedOverDatum
+      ? { datum: { ...mousedOverDatum, y: getYForKey(mousedOverDatum, mousedOverKey) } }
+      : null;
+
+    return (
+      <div
+        style={{
+          fontFamily: theme.labelStyles.fontFamily,
+          fontSize: 12,
+          color: theme.colors.grays[6],
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <svg width={0} height={0}>
+          <PatternLines
+            id={PATTERN_ID}
+            height={6}
+            width={6}
+            stroke={theme.colors.darkGray}
+            strokeWidth={1}
+            orientation={['diagonal']}
+          />
+        </svg>
+
+        <XYChart
+          ariaLabel="test"
+          {...stackedChartProps}
+          width={width}
+          height={height * 3}
+          theme={theme}
+          tooltipData={stackCrossHairData}
+        >
+          <StackedBarSeries
+            fillOpacity={0.9}
+            data={stackedData}
+            stackKeys={stackKeys}
+            stackFills={stackFills}
+            stroke={theme.colors.darkGray}
+            strokeWidth={0.5}
+            onMouseMove={this.onMouseMove}
+            onMouseLeave={this.onMouseLeave}
+            onClick={this.onClick}
+          />
+          {selectedDatum &&
+            <StackedBarSeries
+              data={[selectedDatum]}
+              stackKeys={['y']}
+              stackFills={[`url(#${PATTERN_ID})`]}
+              disableMouseEvents
+            />}
+          {stackCrossHairData &&
+            <CrossHair
+              fullHeight
+              showHorizontalLine={false}
+              circleFill={stackFills[stackKeys.indexOf(mousedOverKey)]}
+            />}
+          <XAxis tickFormat={formatDate} />
+        </XYChart>
+
+        {stackKeys.map((seriesKey, stackIndex) => (
+          <XYChart
+            key={seriesKey}
+            ariaLabel={seriesKey}
+            {...areaChartProps}
+            width={width}
+            height={height}
+            theme={theme}
+            tooltipData={crossHairData}
+          >
+            <XAxis tickFormat={formatDate} tickValues={tickValues} />
+            <AreaSeries
+              data={stackedData.map(d => ({ ...d, y: d[seriesKey] }))}
+              fill={stackFills[stackIndex]}
+              fillOpacity={0.9}
+              strokeWidth={1}
+              stroke={stackFills[stackIndex]}
+              onMouseMove={({ datum }) => { this.onMouseMove({ datum, seriesKey }); }}
+              onMouseLeave={this.onMouseLeave}
+            />
+            {intervalData &&
+              <IntervalSeries
+                fill={`url(#${PATTERN_ID})`}
+                opacity={0.3}
+                data={intervalData}
+              />}
+            {mousedOverDatum &&
+              <CrossHair
+                fullHeight
+                showHorizontalLine={false}
+                showCircle={seriesKey === mousedOverKey}
+                circleFill={stackFills[stackIndex]}
+              />}
+          </XYChart>
+        ))}
+      </div>
+    );
+  }
+}
+
+
+export default withScreenSize(LinkedXYCharts);

packages/demo/examples/01-xy-chart/ScatterWithHistograms.jsx

@@ -91,7 +91,6 @@ class ScatterWithHistogram extends React.PureComponent {
           {datasets.map((dataset, i) => (
             <PointSeries
               key={i}
-              label={String(i)}
               data={dataset}
               fill={datasetColors[i]}
               opacity={0.7}

packages/demo/examples/01-xy-chart/StackedAreaExample.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { timeParse, timeFormat } from 'd3-time-format';
+
+import LegendOrdinal from '@vx/legend/build/legends/Ordinal';
+import scaleOrdinal from '@vx/scale/build/scales/ordinal';
+
+import {
+  CrossHair,
+  StackedAreaSeries,
+  PatternCircles,
+  theme,
+  XAxis,
+} from '@data-ui/xy-chart';
+
+import {
+  stackedData as initialStackedData,
+  groupKeys as stackKeys,
+} from './data';
+
+import ResponsiveXYChart from './ResponsiveXYChart';
+import WithToggle from '../shared/WithToggle';
+
+const PATTERN_ID_1 = 'stackedarea_1';
+const PATTERN_ID_2 = 'stackedarea_2';
+const PATTERN_ID_3 = 'stackedarea_3';
+const PATTERN_COLOR = theme.colors.categories[4];
+
+export const parseDate = timeParse('%Y%m%d');
+export const formatDate = timeFormat('%b %d');
+
+const stackedData = initialStackedData.map(d => ({
+  x: parseDate(d.x),
+  ...stackKeys.reduce((obj, key) => {
+    // multple by a random fraction bc there isn't much variation in temp
+    const value = d[key] * Math.max(0.1, Math.random());
+    return { ...obj, y: obj.y + value, [key]: value };
+  }, { y: 0 }),
+}));
+
+const percentStackedData = stackedData.map(d => ({
+  ...d,
+  y: 1,
+  ...stackKeys.reduce((obj, key) => ({ ...obj, [key]: d[key] / d.y }), {}),
+}));
+
+const patternIds = [PATTERN_ID_1, PATTERN_ID_2, PATTERN_ID_3];
+const stackFills = patternIds.map(id => `url(#${id})`);
+const legendScale = scaleOrdinal({ range: stackFills, domain: stackKeys });
+
+export default function StackedAreaExample() {
+  return (
+    <WithToggle id="lineseries_toggle" label="As percent" initialChecked>
+      {asPercent => (
+        <div
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+        >
+          <LegendOrdinal
+            key="legend"
+            direction="row"
+            scale={legendScale}
+            shape={({ fill, width, height }) => (
+              <svg width={width} height={height}>
+                <rect
+                  width={width}
+                  height={height}
+                  fill={fill}
+                />
+              </svg>
+            )}
+            fill={({ datum }) => legendScale(datum)}
+            labelFormat={label => label}
+          />
+
+          <ResponsiveXYChart
+            ariaLabel="Stacked area chart of temperatures"
+            key="chart"
+            xScale={{ type: 'time' }}
+            yScale={{ type: 'linear' }}
+            margin={{ top: 8, left: 24, right: 24 }}
+          >
+            <PatternCircles
+              id={PATTERN_ID_1}
+              width={8}
+              height={8}
+              radius={2}
+              stroke={PATTERN_COLOR}
+              fill={'#fff'}
+            />
+            <PatternCircles
+              id={PATTERN_ID_2}
+              width={2}
+              height={2}
+              radius={2}
+              stroke={PATTERN_COLOR}
+              fill={PATTERN_COLOR}
+            />
+            <PatternCircles
+              id={PATTERN_ID_3}
+              width={4}
+              height={4}
+              radius={2}
+              stroke={PATTERN_COLOR}
+              fill={'#fff'}
+            />
+            <StackedAreaSeries
+              data={asPercent ? percentStackedData : stackedData}
+              strokeWidth={2}
+              stackKeys={stackKeys}
+              stackFills={stackFills}
+              fillOpacity={1}
+            />
+            <CrossHair
+              stroke={PATTERN_COLOR}
+              strokeWidth={2}
+              showHorizontalLine={false}
+              showCircle={false}
+              strokeDasharray=""
+            />
+            <CrossHair
+              stroke="#fff"
+              strokeWidth={1}
+              showHorizontalLine={false}
+              showCircle={false}
+              strokeDasharray=""
+            />
+            <XAxis tickFormat={formatDate} />
+          </ResponsiveXYChart>
+        </div>
+      )}
+    </WithToggle>
+  );
+}