Add getColorScale to enable displaying multiple lines in LineChart

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Add `getColorScale` to receive color encoding in charts. (#11)
 - Extract the animation frame controls as a custom effect hook. (#10)
 - Add `tslint-react-hooks` rules to lint React Hooks. (#8)
 - Add `ThemeProvider` and color / xy axis themes config for customize theme. (#6)

docs/charts/LineChart.mdx

@@ -7,6 +7,7 @@ menu: Charts
 import { Playground, PropsTable } from 'docz'
 import { LineChart } from '@ichef/transcharts-chart'
 import lineData from '../sampleData/lineData';
+import multiLinesData from '../sampleData/multiLinesData'
 
 # Line Chart
 
@@ -64,6 +65,56 @@ const lineData = [
   </div>
 </Playground>
 
+## Multiple lines
+
+### Nominal color field
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={multiLinesData}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "type",
+        type: "nominal",
+      }}
+    />
+  </div>
+</Playground>
+
+### Quantitative color field
+
+<Playground>
+  <div style={{ width: '100%', height: '320px' }}>
+    <LineChart
+      data={[
+        { x: 1, y: 5, size: 3 },
+        { x: 3, y: 6, size: 3 },
+        { x: 2, y: 3, size: 3 },
+        { x: 9, y: 7, size: 3 },
+        { x: 7, y: 1, size: 3 },
+        { x: 4, y: 2, size: 5 },
+        { x: 1, y: 10, size: 5 },
+        { x: 6, y: 4, size: 5 },
+        { x: 8, y: 9, size: 5 },
+        { x: 9, y: 0, size: 5 },
+        { x: 5, y: 3, size: 8 },
+        { x: 3, y: 8, size: 8 },
+        { x: 4, y: 4, size: 8 },
+        { x: 10, y:7, size: 8 },
+      ]}
+      x={{ type: 'quantitative', field: 'x' }}
+      y={{ type: 'quantitative', field: 'y' }}
+      color={{
+        field: "size",
+        type: "quantitative",
+      }}
+    />
+  </div>
+</Playground>
+
+
 ## Props
 
 <PropsTable of={LineChart} />

docs/sampleData/multiLinesData.js

@@ -0,0 +1,14 @@
+export const mutliLinesData = [
+  { x: 0, y: 9, type: "type1", date: '2019/01/21 00:00:00', weekday: 'Mon' },
+  { x: 1, y: 5, type: "type2", date: '2019/01/22 00:00:00', weekday: 'Tue' },
+  { x: 2, y: 5, type: "type2", date: '2019/01/23 00:00:00', weekday: 'Wed' },
+  { x: 3, y: 3, type: "type1", date: '2019/01/24 00:00:00', weekday: 'Thu'},
+  { x: 4, y: 1, type: "type2", date: '2019/01/25 00:00:00', weekday: 'Fri' },
+  { x: 10, y: 9, type: "type1", date: '2019/01/21 00:00:00', weekday: 'Mon' },
+  { x: 6, y: 5, type: "type2", date: '2019/01/22 00:00:00', weekday: 'Tue' },
+  { x: 7, y: 5, type: "type2", date: '2019/01/23 00:00:00', weekday: 'Wed' },
+  { x: 2, y: 3, type: "type1", date: '2019/01/24 00:00:00', weekday: 'Thu'},
+  { x: 8, y: 1, type: "type2", date: '2019/01/25 00:00:00', weekday: 'Fri' },
+];
+
+export default mutliLinesData;

packages/chart/src/line/LineChart.tsx

@@ -11,8 +11,13 @@ import {
   TooltipLayer,
   // from common types
   Margin,
+  FieldSelector,
+  Encoding,
   AxisEncoding,
+  ColorEncoding,
   // from utils
+  getColorScale,
+  getDataGroupByEncodings,
   getXAxisScale,
   getYAxisScale,
   // from themes
@@ -30,6 +35,7 @@ export interface LineChartProps {
   data: object[];
   x: AxisEncoding;
   y: AxisEncoding;
+  color?: ColorEncoding;
   /** Should show the axis on the left or not */
   showLeftAxis: boolean;
   /** Should show the axis on the bottom or not */
@@ -69,10 +75,45 @@ const HoveringIndicator: FunctionComponent<{
   );
 };
 
+const DataLine: FunctionComponent<{
+  color: string,
+  xSelector: FieldSelector,
+  ySelector: FieldSelector,
+  rows: object[],
+}> = ({ color, xSelector, ySelector, rows }) => {
+  const lineDots = rows.map((dataRow, index) => (
+    <circle
+      key={`c-${index}`}
+      cx={xSelector.getScaledVal(dataRow)}
+      cy={ySelector.getScaledVal(dataRow)}
+      r={3.5}
+      fill={color}
+    />
+  ));
+  return (
+    <>
+      {/* Draw the line */}
+      <LinePath
+        data={rows}
+        x={xSelector.getScaledVal}
+        y={ySelector.getScaledVal}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+
+      {/* Draw dots on the line */}
+      {lineDots}
+    </>
+  );
+};
+
 export const LineChart: FunctionComponent<LineChartProps> = ({
   data,
   x,
   y,
+  color,
   margin = {
     top: 20,
     right: 20,
@@ -104,20 +145,36 @@ export const LineChart: FunctionComponent<LineChartProps> = ({
   const xSelector = xAxis.selector;
   const ySelector = yAxis.selector;
 
-  const bandWidth = graphWidth / (data.length - 1);
-
   /** Width of the collision detection rectangle */
-  const color = theme.colors.category[0];
+  const bandWidth = graphWidth / (data.length - 1);
+  const colorScale = (typeof color !== 'undefined') && getColorScale({
+    data,
+    encoding: color,
+    colors: theme.colors,
+  });
+  const defaultColor = theme.colors.category[0];
+  const getColor = colorScale
+    ? colorScale.selector.getScaledVal
+    : () => defaultColor;
+  const sortedData = data.sort(
+    (rowA, rowB) => xSelector.getOriginalVal(rowA) - xSelector.getOriginalVal(rowB)
+  );
+  const encodings = [color].filter((encoding): encoding is Encoding => !!encoding);
+  const dataGroup = getDataGroupByEncodings(sortedData, encodings);
 
-  const lineDots = data.map((dataRow, index) => (
-    <circle
-      key={`c-${index}`}
-      cx={xSelector.getScaledVal(dataRow)}
-      cy={ySelector.getScaledVal(dataRow)}
-      r={3.5}
-      fill={color}
-    />
-  ));
+  const graphGroup = dataGroup.map(
+    rows => {
+      const colorString: string = getColor(rows[0]);
+      return (
+        <DataLine
+          color={colorString}
+          rows={rows}
+          xSelector={xSelector}
+          ySelector={ySelector}
+        />
+      );
+    }
+  );
 
   return (
     <div
@@ -126,7 +183,6 @@ export const LineChart: FunctionComponent<LineChartProps> = ({
     >
       <svg width={outerWidth} height={outerHeight}>
         <g transform={`translate(${margin.left}, ${margin.top})`}>
-          {/* Draw the axes */}
           <AxisLayer
             width={graphWidth}
             height={graphHeight}
@@ -137,25 +193,13 @@ export const LineChart: FunctionComponent<LineChartProps> = ({
             yAxis={yAxis}
           />
 
-          {/* Draw the line */}
-          <LinePath
-            data={data}
-            x={xSelector.getScaledVal}
-            y={ySelector.getScaledVal}
-            stroke={color}
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-
-          {/* Draw dots on the line */}
-          {lineDots}
+          {graphGroup}
           <HoveringIndicator
             hovering={hovering}
             xPos={xSelector.getScaledVal(data[hoveredPoint.index])}
             yPos={ySelector.getScaledVal(data[hoveredPoint.index])}
             height={graphHeight}
-            color={color}
+            color={getColor(data[hoveredPoint.index])}
           />
 
           {/* Areas which are used to detect mouse or touch interactions */}
@@ -190,7 +234,6 @@ export const LineChart: FunctionComponent<LineChartProps> = ({
           />
         </g>
       </svg>
-
       {/* Draw the tooltip */}
       <TooltipLayer
         hovering={hovering}
@@ -201,7 +244,7 @@ export const LineChart: FunctionComponent<LineChartProps> = ({
         margin={margin}
         xSelector={xSelector}
         ySelector={ySelector}
-        color={color}
+        getColor={getColor}
       />
     </div>
   );

packages/graph/src/common/types.ts

@@ -34,7 +34,7 @@ export interface Scale {
   /**
    * Range of input channel
    */
-  range: [any, any];
+  range?: ReadonlyArray<any>;
 
   /** Returns the formatted value according to the type of the axis */
   getValue: (val: any) => any;
@@ -55,10 +55,13 @@ export interface AxisScale extends Scale {
    * Range of the axis: [min, max]
    * it should match the inner width and height of the graph
    */
-  range: [number, number];
+  range?: [number, number];
 }
 
 export type EncodingDataType = 'nominal' | 'ordinal' | 'quantitative' | 'temporal';
+export interface ColorScale extends Scale {
+  range?: [string, string] | ReadonlyArray<string>
+}
 
 export interface Encoding {
   field: string;
@@ -70,6 +73,8 @@ export interface AxisEncoding extends Encoding {
   scale?: AxisScaleType;
 }
 
+export type ColorEncoding = Encoding;
+
 export interface Margin {
   top: number;
   right: number;
@@ -93,6 +98,10 @@ export interface Theme {
   colors: {
     /** colors used for nominal data */
     category: ReadonlyArray<string>;
+    sequential: {
+      scheme: ReadonlyArray<string>;
+      interpolator: (val: number) => string;
+    }
   };
   /** x-axis theme config */
   xAxis: AxisTheme;

packages/graph/src/index.ts

@@ -11,4 +11,6 @@ export * from './themes';
 export * from './tooltip/Tooltip';
 export * from './tooltip/TooltipItem';
 export * from './utils/getAxisScale';
+export * from './utils/getColorScale';
+export * from './utils/getDataGroupByEncodings';
 export * from './utils/getRecordFieldSelector';

packages/graph/src/layers/TooltipLayer.tsx

@@ -13,7 +13,7 @@ export interface TooltipLayerProps {
   margin: Margin;
   xSelector: FieldSelector;
   ySelector: FieldSelector;
-  color: string;
+  getColor: FieldSelector['getScaledVal'];
 }
 
 /** Generates the tooltip box */
@@ -26,7 +26,7 @@ export const TooltipLayer: React.FC<TooltipLayerProps> = ({
   margin,
   xSelector,
   ySelector,
-  color,
+  getColor,
 }) => {
   const { index, position } = hoveredPoint;
 
@@ -42,8 +42,10 @@ export const TooltipLayer: React.FC<TooltipLayerProps> = ({
       show={hovering}
     >
       <h3>{xSelector.getFormattedStringVal(data[index])}</h3>
-      {/* TODO: unify the way of dealing colors of the fields */}
-      <TooltipItem color={color} text={ySelector.getFormattedStringVal(data[index])} />
+      <TooltipItem
+        color={getColor(data[index])}
+        text={ySelector.getFormattedStringVal(data[index])}
+      />
     </Tooltip>
   );
 };

packages/graph/src/themes/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { schemeCategory10 } from 'd3-scale-chromatic';
+import { schemeCategory10, interpolateBlues, schemeBlues } from 'd3-scale-chromatic';
 import deepmerge from 'deepmerge';
 
 import { Theme } from '../common/types';
@@ -14,6 +14,10 @@ export const themes = {
   default: {
     colors: {
       category: schemeCategory10,
+      sequential: {
+        scheme: schemeBlues[9],
+        interpolator: interpolateBlues,
+      },
     },
     xAxis: {
       strokeColor: '#7c8a94',