@oliasoft-open-source/charts-library 2.0.0

package/src/components/pie-chart/basic.stories.jsx

@@ -0,0 +1,390 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { PieChart } from './pie-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const darkmodeStyle = {
+  backgroundColor: '#232628',
+};
+
+const labels1 = ['label 1', 'label 2', 'label 3'];
+const dataset1 = { label: 'data1', data: [3, 8, 7] };
+const dataset2 = { label: 'data2', data: [1, 2, 3] };
+const dataset3 = { label: 'data3', data: [5, 0, 4] };
+
+const spacingDataset = {
+  label: 'spacing data',
+  spacing: 50,
+  data: [3, 8, 7],
+};
+const offsetDataset = {
+  label: 'spacing data',
+  offset: 40,
+  data: [3, 8, 7],
+};
+const circumferenceDataset = {
+  label: 'circumference data',
+  circumference: 270,
+  data: [3, 8, 7],
+};
+const borderWidthDataset = {
+  label: 'border data',
+  borderWidth: 8,
+  data: [3, 8, 7],
+};
+const hoverOffsetDataset = {
+  label: 'hover data',
+  data: [3, 8, 7],
+  hoverOffset: 40,
+};
+
+const datasetDatalabels = {
+  label: 'data',
+  data: [
+    {
+      value: 210,
+      label: 'label',
+    },
+    {
+      value: 333,
+      label: 'labal',
+    },
+    {
+      value: 248,
+      label: 'lebel',
+    },
+  ],
+};
+const datasetNoDataLabels = {
+  label: 'data',
+  data: [210, 333, 248],
+};
+
+const singleChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+};
+
+const multiplePieData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+};
+const stackedMultiplePieData = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Stacked',
+    graph: { stacked: true },
+  },
+};
+
+const dataLabelsChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With custom datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+const dataLabelsNumberChart = {
+  data: {
+    labels: labels1,
+    datasets: [datasetNoDataLabels],
+  },
+  options: {
+    title: 'With value as datalabels',
+    graph: {
+      showDataLabels: true,
+    },
+  },
+};
+
+const dataLabelssTooltips = {
+  data: {
+    labels: labels1,
+    datasets: [datasetDatalabels],
+  },
+  options: {
+    title: 'With datalabels in tooltips',
+    tooltip: {
+      showLabelsInTooltips: true,
+    },
+  },
+};
+
+const lightMode = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Light mode',
+    axes: {
+      x: [
+        {
+          label: 'X',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: false,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 6,
+        },
+      ],
+    },
+  },
+};
+const darkMode = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Dark mode',
+    axes: {
+      x: [
+        {
+          label: 'X',
+        },
+      ],
+    },
+    chartStyling: {
+      darkMode: true,
+    },
+    graph: {
+      showDataLabels: true,
+      showMinorGridlines: true,
+    },
+    annotations: {
+      annotationsData: [
+        {
+          label: 'Annotation 1',
+          value: 6,
+        },
+      ],
+    },
+  },
+};
+
+const borderWidthChart = {
+  data: {
+    labels: labels1,
+    datasets: [borderWidthDataset],
+  },
+  options: { title: 'Custom border Width' },
+};
+
+const hoverOffsetChart = {
+  data: {
+    labels: labels1,
+    datasets: [hoverOffsetDataset],
+  },
+  options: { title: 'Hover offset' },
+};
+
+const spacingChart = {
+  data: {
+    labels: labels1,
+    datasets: [spacingDataset],
+  },
+  options: { title: 'Segment spacing' },
+};
+
+const offsetChart = {
+  data: {
+    labels: labels1,
+    datasets: [offsetDataset],
+  },
+  options: { title: 'Segment offset' },
+};
+
+const circumferenceChart = {
+  data: {
+    labels: labels1,
+    datasets: [circumferenceDataset],
+  },
+  options: { title: 'Using circumference' },
+};
+
+const datasetLegend = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Legend with dataset instead of label',
+    legend: {
+      useDataset: true,
+    },
+  },
+};
+
+const datasetLegendStacked = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2, dataset3],
+  },
+  options: {
+    title: 'Legend with stacked dataset',
+    legend: {
+      useDataset: true,
+    },
+    graph: {
+      stacked: true,
+    },
+  },
+};
+
+const legendRight = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Legend to the right',
+    legend: {
+      position: 'right',
+    },
+  },
+};
+
+const legendStart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Legend aligned to start',
+    legend: {
+      align: 'start',
+    },
+  },
+};
+
+const animatedChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    chartStyling: { performanceMode: false },
+  },
+};
+
+const animatedMultiChart = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    chartStyling: { performanceMode: false },
+    legend: {
+      useDataset: true,
+    },
+  },
+};
+
+const doughnutPercentage = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Cutout 50%',
+    graph: { cutout: '50%' },
+  },
+};
+
+const doughnutNumber = {
+  data: {
+    labels: labels1,
+    datasets: [dataset1],
+  },
+  options: {
+    title: 'Cutout 20 pixels',
+    graph: { cutout: 20 },
+  },
+};
+
+storiesOf('Charts/PieChart/Basics', module)
+  .add('Default', () => (
+    <Container style={style}>
+      <PieChart chart={singleChart} />
+    </Container>
+  ))
+  .add('Multiple Sets', () => (
+    <Container style={style}>
+      <PieChart chart={multiplePieData} />
+      <PieChart chart={stackedMultiplePieData} />
+    </Container>
+  ))
+  .add('Datalabels', () => (
+    <Container style={style}>
+      <PieChart chart={dataLabelsChart} />
+      <PieChart chart={dataLabelsNumberChart} />
+      <PieChart chart={dataLabelssTooltips} />
+    </Container>
+  ))
+  .add('Legend', () => (
+    <Container style={style}>
+      <PieChart chart={datasetLegend} />
+      <PieChart chart={datasetLegendStacked} />
+      <PieChart chart={legendRight} />
+      <PieChart chart={legendStart} />
+    </Container>
+  ))
+  .add('Animated', () => (
+    <Container style={style}>
+      <PieChart chart={animatedChart} />
+      <PieChart chart={animatedMultiChart} />
+    </Container>
+  ))
+  .add('Dark mode', () => (
+    <Container style={style}>
+      <Container>
+        <PieChart chart={lightMode} />
+      </Container>
+      <Container style={darkmodeStyle}>
+        <PieChart chart={darkMode} />
+      </Container>
+    </Container>
+  ))
+  .add('Doughnut', () => (
+    <Container style={style}>
+      <PieChart chart={doughnutPercentage} />
+      <PieChart chart={doughnutNumber} />
+    </Container>
+  ))
+  .add('Segment styling', () => (
+    <Container style={style}>
+      <PieChart chart={hoverOffsetChart} />
+      <PieChart chart={borderWidthChart} />
+      <PieChart chart={spacingChart} />
+      <PieChart chart={offsetChart} />
+      <PieChart chart={circumferenceChart} />
+    </Container>
+  ));

package/src/components/pie-chart/charts.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { PieChart } from './pie-chart';
+import { Container } from '../../helpers/container';
+
+const style = {
+  height: '1000px',
+  width: '1000px',
+};
+
+const chart = {
+  data: {
+    labels: ['monday', 'tuesday', 'wednesday', 'friday'],
+    datasets: [
+      {
+        label: 'some data',
+        borderColor: ['blue', 'red', 'orange', 'green'],
+        backgroundColor: ['#333333', '#777777', '#bbbbbb', '#ffffff'],
+        borderWidth: 4,
+        offset: 100,
+        data: [2, 4, 8, 16],
+      },
+      {
+        label: 'some other data',
+        borderColor: ['#880088', '#ff8800'],
+        backgroundColor: ['#ff8800dd', '#880088dd'],
+        borderWidth: 10,
+        spacing: 50,
+        data: [42, 8, 22, 19],
+      },
+      {
+        label: 'some otter data',
+        circumference: 270,
+        hoverOffset: -40,
+
+        data: [10, 20, 22, 19],
+      },
+    ],
+  },
+  options: {
+    title: 'Take a piece of this pie!',
+    chartStyling: {
+      width: 1200,
+      height: 800,
+      performanceMode: false,
+    },
+    graph: {
+      showDataLabels: true,
+      cutout: '20%',
+    },
+    legend: {
+      position: 'top',
+      align: 'start',
+    },
+    interactions: {
+      onPieHover: null,
+      onPieUnhover: null,
+    },
+  },
+};
+
+storiesOf('Charts/PieChart', module).add('Kitchen Sink', () => (
+  <Container style={style}>
+    <PieChart chart={chart} />
+  </Container>
+));

package/src/components/pie-chart/pie-chart-prop-types.js

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+
+export const PieChartPropTypes = {
+  chart: PropTypes.shape({
+    data: PropTypes.shape({
+      labels: PropTypes.arrayOf(PropTypes.string),
+      datasets: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }).isRequired,
+    options: PropTypes.shape({
+      title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
+      chartStyling: PropTypes.shape({
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        maintainAspectRatio: PropTypes.bool,
+        staticChartHeight: PropTypes.bool,
+        performanceMode: PropTypes.bool,
+        darkMode: PropTypes.bool,
+      }),
+      tooltip: PropTypes.shape({
+        tooltips: PropTypes.bool,
+        showLabelsInTooltips: PropTypes.bool,
+      }),
+      graph: PropTypes.shape({
+        showDataLabels: PropTypes.bool,
+        stacked: PropTypes.bool,
+        cutout: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      }),
+      legend: PropTypes.shape({
+        display: PropTypes.bool,
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        align: PropTypes.oneOf(['start', 'center', 'end']),
+        useDataset: PropTypes.bool,
+      }),
+      chartOptions: PropTypes.shape({
+        enableZoom: PropTypes.bool,
+        enablePan: PropTypes.bool,
+      }),
+      interactions: PropTypes.shape({
+        onLegendClick: PropTypes.func,
+        onPieHover: PropTypes.func,
+        onPieUnhover: PropTypes.func,
+      }),
+    }),
+  }).isRequired,
+};
+
+export const getDefaultProps = (props) => {
+  // Add missing nested objects
+  props.chart.options = props.chart.options || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  // Set defaults for missing properties
+  const chart = {
+    data: props.chart.data,
+    options: {
+      title: props.chart.options.title || '',
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio:
+          props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight:
+          props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode:
+          props.chart.options.chartStyling.performanceMode != null
+            ? props.chart.options.chartStyling.performanceMode
+            : true,
+        darkMode: props.chart.options.chartStyling.darkMode || false,
+      },
+      tooltip: {
+        tooltips:
+          props.chart.options.tooltip.tooltips != null
+            ? props.chart.options.tooltip.tooltips
+            : true,
+        showLabelsInTooltips:
+          props.chart.options.tooltip.showLabelsInTooltips || false,
+      },
+      graph: {
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        stacked: props.chart.options.graph.stacked || false,
+        cutout: props.chart.options.graph.cutout || 0,
+      },
+      legend: {
+        display:
+          props.chart.options.legend.display != null
+            ? props.chart.options.legend.display
+            : true,
+        useDataset: props.chart.options.legend.useDataset || false,
+        position: props.chart.options.legend.position || 'bottom',
+        align: props.chart.options.legend.align || 'center',
+      },
+      chartOptions: {
+        enableZoom: props.chart.options.chartOptions.enableZoom || false,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPieHover: props.chart.options.interactions.onPieHover,
+        onPieUnhover: props.chart.options.interactions.onPieUnhover,
+      },
+    },
+  };
+  return chart;
+};

package/src/components/pie-chart/pie-chart-utils.js

@@ -0,0 +1,55 @@
+export const colors = [
+  '#3366cc',
+  '#dc3912',
+  '#ff9900',
+  '#109618',
+  '#990099',
+  '#0099c6',
+  '#dd4477',
+  '#66aa00',
+  '#b82e2e',
+  '#316395',
+  '#994499',
+  '#22aa99',
+  '#aaaa11',
+  '#6633cc',
+  '#e67300',
+  '#8b0707',
+  '#651067',
+  '#329262',
+  '#5574a6',
+  '#3b3eac',
+];
+
+export const colorsDarkmode = [
+  '#578fff',
+  '#ff5026',
+  '#ff9900',
+  '#24ff31',
+  '#ff00ff',
+  '#00c5ff',
+  '#f7407d',
+  '#99ff00',
+  '#ff4040',
+  '#51a7fc',
+  '#f26bf2',
+  '#36f8ff',
+  '#ffff19',
+  '#9c6bff',
+  '#ff8b17',
+  '#ff1212',
+  '#fa29ff',
+  '#54ffaa',
+  '#80b0ff',
+  '#595eff',
+];
+
+export const generateRandomColor = () => {
+  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  if (colors.includes(color)) {
+    return generateRandomColor();
+  } else {
+    colors.push(color);
+    return color;
+  }
+};

package/src/components/pie-chart/pie-chart.interface.ts

@@ -0,0 +1,61 @@
+export interface IChartInteractions {
+    onLegendClick: () => any;
+    onPointHover: () => any;
+    onPointUnhover: () => any;
+}
+
+export interface IChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+    useDataset: boolean;
+}
+
+export interface IChartGraph {
+    showDataLabels: boolean;
+    stacked: boolean;
+    cutout: number | string;
+}
+
+export interface IChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+}
+
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+    darkMode: boolean;
+}
+
+export interface IOptions {
+    title: string | string[];
+    chartStyling: IChartStyling;
+    tooltip: IChartTooltip;
+    graph: IChartGraph;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+}
+
+export interface IChartData {
+    labels: string;
+    datasets: any[];
+}
+
+export interface IChartData {
+    data: IChartData;
+    options: IOptions;
+}
+
+export interface IPieChartProps {
+    chart: IChartData;
+}