@oliasoft-open-source/charts-library 2.1.0 → 2.1.2

package/src/components/bar-chart/{basic.stories.jsx → bar-chart.stories.jsx}

@@ -1,15 +1,6 @@
 import React from 'react';
 import { BarChart } from './bar-chart';
-import { Container } from '../../helpers/container';
-
-const style = {
-  height: '1000px',
-  width: '1000px',
-};
-
-const darkmodeStyle = {
-  backgroundColor: '#232628',
-};
+import { getCustomLegendPlugin } from '../../helpers/get-custom-legend-plugin-example';
 
 const labels1 = ['label 1', 'label 2', 'label 3'];
 const dataset1_1a = { label: 'data1', data: [3, 8, 7] };
@@ -26,87 +17,6 @@ const dataset1_3c = { label: 'data3', data: [5, 0, 4], stack: 2 };
 
 const annotationDataset = { label: 'data', data: [42, 57, 64] };
 
-const numericData = {
-  label: 'numeric data',
-  data: [
-    {
-      x: 1,
-      y: 3,
-    },
-    {
-      x: 2,
-      y: 8,
-    },
-    {
-      x: 3,
-      y: 7,
-    },
-  ],
-};
-
-const floatingData = {
-  label: 'floating data',
-  data: [
-    [2, 3],
-    [1.2, 8],
-    [4, 7],
-  ],
-};
-
-const roundedDataset = {
-  label: 'rounded data',
-  borderRadius: 50,
-  data: [42, 57, 64],
-};
-const borderWidthDataset = {
-  label: 'rounded data',
-  borderWidth: 8,
-  data: [42, 57, 64],
-};
-
-const borderSkippedDataset = {
-  label: 'border skipped bottom',
-  borderSkipped: 'bottom',
-  data: [42, 57, 64],
-  backgroundColor: [
-    'rgba(255, 99, 132, 0.2)',
-    'rgba(255, 159, 64, 0.2)',
-    'rgba(255, 205, 86, 0.2)',
-  ],
-  borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)'],
-};
-const borderSkippedDataset2 = {
-  label: 'border skipped top',
-  borderSkipped: 'top',
-  data: [47, 53, 69],
-  backgroundColor: [
-    'rgba(99, 132, 255, 0.2)',
-    'rgba(159, 64, 255, 0.2)',
-    'rgba(205, 86, 255, 0.2)',
-  ],
-  borderColor: ['rgb(99, 132, 255)', 'rgb(159, 64, 255)', 'rgb(205, 86, 255)'],
-};
-
-const datasetDatalabels = {
-  label: 'data',
-  data: [
-    {
-      x: 0,
-      y: 210,
-      label: 'label',
-    },
-    {
-      x: 0,
-      y: 333,
-      label: 'labal',
-    },
-    {
-      x: 0,
-      y: 248,
-      label: 'lebel',
-    },
-  ],
-};
 const datasetNoDataLabels = {
   label: 'data',
   data: [210, 333, 248],
@@ -172,13 +82,6 @@ const groupedStacked = {
   },
 };
 
-const vertical = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: { title: 'vertical' },
-};
 const reversed = {
   data: {
     labels: labels1,
@@ -236,27 +139,6 @@ const axesWithLabels = {
     },
   },
 };
-const axesWithUnits = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'With axes units',
-    axes: {
-      x: [
-        {
-          unit: 'day',
-        },
-      ],
-      y: [
-        {
-          unit: 'm',
-        },
-      ],
-    },
-  },
-};
 
 const axisPosition = {
   data: {
@@ -334,18 +216,6 @@ const logartihmicChart = {
   },
 };
 
-const dataLabelsChart = {
-  data: {
-    labels: labels1,
-    datasets: [datasetDatalabels],
-  },
-  options: {
-    title: 'With custom datalabels',
-    graph: {
-      showDataLabels: true,
-    },
-  },
-};
 const dataLabelsNumberChart = {
   data: {
     labels: labels1,
@@ -359,47 +229,6 @@ const dataLabelsNumberChart = {
   },
 };
 
-const dataLabelsNoBeginAtZero = {
-  data: {
-    labels: labels1,
-    datasets: [datasetDatalabels],
-  },
-  options: {
-    title: 'When not beginning at zero',
-    additionalAxesOptions: {
-      beginAtZero: false,
-    },
-    graph: {
-      showDataLabels: true,
-    },
-  },
-};
-
-const dataLabelssTooltips = {
-  data: {
-    labels: labels1,
-    datasets: [datasetDatalabels],
-  },
-  options: {
-    title: 'With datalabels in tooltips',
-    tooltip: {
-      showLabelsInTooltips: true,
-    },
-  },
-};
-
-const minorGridlines = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    graph: {
-      showMinorGridlines: true,
-    },
-  },
-};
-
 const horizontalAnnotationChart = {
   data: {
     labels: labels1,
@@ -492,37 +321,6 @@ const controlAnnotationChart = {
   },
 };
 
-const lightMode = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a, dataset1_2a, dataset1_3a],
-  },
-  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,
@@ -555,56 +353,6 @@ const darkMode = {
   },
 };
 
-const borderWidthChart = {
-  data: {
-    labels: labels1,
-    datasets: [borderWidthDataset],
-  },
-  options: { title: 'Custom border Width' },
-};
-
-const roundedBars = {
-  data: {
-    labels: labels1,
-    datasets: [roundedDataset],
-  },
-  options: { title: 'Rounded borders' },
-};
-
-const skippedBorders = {
-  data: {
-    labels: labels1,
-    datasets: [borderSkippedDataset, borderSkippedDataset2],
-  },
-  options: {
-    title: 'Skipped borders',
-    direction: 'horizontal',
-  },
-};
-
-const categoryChart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: { title: 'Category data' },
-};
-
-const floatingChart = {
-  data: {
-    labels: labels1,
-    datasets: [floatingData],
-  },
-  options: { title: 'Floating bars' },
-};
-
-const numericChart = {
-  data: {
-    datasets: [numericData],
-  },
-  options: { title: 'Numeric data' },
-};
-
 const legendRight = {
   data: {
     labels: labels1,
@@ -618,19 +366,6 @@ const legendRight = {
   },
 };
 
-const legendStart = {
-  data: {
-    labels: labels1,
-    datasets: [dataset1_1a],
-  },
-  options: {
-    title: 'Legend aligned to start',
-    legend: {
-      align: 'start',
-    },
-  },
-};
-
 const animatedChart = {
   data: {
     labels: labels1,
@@ -642,111 +377,113 @@ const animatedChart = {
 };
 
 export default {
-  title: 'Bar Chart',
+  title: 'BarChart',
   component: BarChart,
+  args: {
+    chart: singleChart,
+  },
+};
+
+const Template = (args) => {
+  return (
+    <BarChart
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
 };
 
-export const Default = () => (
-  <Container style={style}>
-    <BarChart chart={singleChart} />
-  </Container>
-);
-
-export const MultipleSets = () => (
-  <Container style={style}>
-    <BarChart chart={multipleBarData} />
-    <BarChart chart={stakedBarData} />
-    <BarChart chart={multipleAxisData} />
-    <BarChart chart={groupedStacked} />
-  </Container>
-);
-
-export const Orientation = () => (
-  <Container style={style}>
-    <BarChart chart={vertical} />
-    <BarChart chart={horizontal} />
-    <BarChart chart={reversed} />
-    <BarChart chart={horizontalReversed} />
-  </Container>
-);
-
-export const InputData = () => (
-  <Container style={style}>
-    <BarChart chart={categoryChart} />
-    <BarChart chart={floatingChart} />
-    <BarChart chart={numericChart} />
-  </Container>
-);
-
-export const AxesData = () => (
-  <Container style={style}>
-    <BarChart chart={axesWithLabels} />
-    <BarChart chart={axesWithUnits} />
-    <BarChart chart={axisPosition} />
-  </Container>
-);
-
-export const AxesOptions = () => (
-  <Container style={style}>
-    <BarChart chart={notBeginAtZero} />
-    <BarChart chart={suggestedRange} />
-    <BarChart chart={stepSizeChart} />
-    <BarChart chart={logartihmicChart} />
-  </Container>
-);
-
-export const WithMinorGridlines = () => (
-  <Container style={style}>
-    <BarChart chart={minorGridlines} />
-  </Container>
-);
-
-export const Datalabels = () => (
-  <Container style={style}>
-    <BarChart chart={dataLabelsChart} />
-    <BarChart chart={dataLabelsNumberChart} />
-    <BarChart chart={dataLabelsNoBeginAtZero} />
-    <BarChart chart={dataLabelssTooltips} />
-  </Container>
-);
-
-export const Legend = () => (
-  <Container style={style}>
-    <BarChart chart={legendRight} />
-    <BarChart chart={legendStart} />
-  </Container>
-);
-
-export const Annotations = () => (
-  <Container style={style}>
-    <BarChart chart={horizontalAnnotationChart} />
-    <BarChart chart={verticalAnnotationChart} />
-    <BarChart chart={diagonalAnnotationChart} />
-    <BarChart chart={controlAnnotationChart} />
-  </Container>
-);
-
-export const Animated = () => (
-  <Container style={style}>
-    <BarChart chart={animatedChart} />
-  </Container>
-);
-
-export const DarkMode = () => (
-  <Container style={style}>
-    <Container>
-      <BarChart chart={lightMode} />
-    </Container>
-    <Container style={darkmodeStyle}>
-      <BarChart chart={darkMode} />
-    </Container>
-  </Container>
-);
-
-export const BarStyling = () => (
-  <Container style={style}>
-    <BarChart chart={borderWidthChart} />
-    <BarChart chart={roundedBars} />
-    <BarChart chart={skippedBorders} />
-  </Container>
-);
+const customLegendContainerID = 'custom-legend-container';
+
+const TemplateWithCustomLegendContainer = (args) => {
+  return (
+    <>
+      <BarChart
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...args}
+      />
+      <div id={customLegendContainerID}></div>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const MultipleSets = Template.bind({});
+MultipleSets.args = { chart: multipleBarData };
+
+export const Stacked = Template.bind({});
+Stacked.args = { chart: stakedBarData };
+
+export const StackedGrouped = Template.bind({});
+StackedGrouped.args = { chart: groupedStacked };
+
+export const MultipleYAxes = Template.bind({});
+MultipleYAxes.args = { chart: multipleAxisData };
+
+export const Horizontal = Template.bind({});
+Horizontal.args = { chart: horizontal };
+
+export const Reversed = Template.bind({});
+Reversed.args = { chart: reversed };
+
+export const HorizontalReversed = Template.bind({});
+HorizontalReversed.args = { chart: horizontalReversed };
+
+export const AxesLabels = Template.bind({});
+AxesLabels.args = { chart: axesWithLabels };
+
+export const AxesPositions = Template.bind({});
+AxesPositions.args = { chart: axisPosition };
+
+export const NonZeroStart = Template.bind({});
+NonZeroStart.args = { chart: notBeginAtZero };
+
+export const CustomRange = Template.bind({});
+CustomRange.args = { chart: suggestedRange };
+
+export const CustomStepSize = Template.bind({});
+CustomStepSize.args = { chart: stepSizeChart };
+
+export const LogarithmicScale = Template.bind({});
+LogarithmicScale.args = { chart: logartihmicChart };
+
+export const Datalabels = Template.bind({});
+Datalabels.args = { chart: dataLabelsNumberChart };
+
+export const LegendOnRight = Template.bind({});
+LegendOnRight.args = { chart: legendRight };
+
+export const AnnotationYAxis = Template.bind({});
+AnnotationYAxis.args = { chart: horizontalAnnotationChart };
+
+export const AnnotationXAxis = Template.bind({});
+AnnotationXAxis.args = { chart: verticalAnnotationChart };
+
+export const AnnotationDiagonal = Template.bind({});
+AnnotationDiagonal.args = { chart: diagonalAnnotationChart };
+
+export const AnnotationsInLegend = Template.bind({});
+AnnotationsInLegend.args = { chart: controlAnnotationChart };
+
+export const Animated = Template.bind({});
+Animated.args = { chart: animatedChart };
+
+export const DarkMode = Template.bind({});
+DarkMode.args = { chart: darkMode };
+
+export const CustomLegend = TemplateWithCustomLegendContainer.bind({});
+CustomLegend.args = {
+  chart: {
+    ...singleChart,
+    options: {
+      title: 'Custom HTML legend',
+      legend: {
+        customLegend: {
+          customLegendPlugin: getCustomLegendPlugin(customLegendContainerID),
+          customLegendContainerID,
+        },
+      },
+    },
+  },
+};

package/src/components/line-chart/Controls/Controls.jsx

@@ -4,6 +4,7 @@ import { Popover, Button } from '@oliasoft-open-source/react-ui-library';
 import { Layer } from './Layer';
 
 export const Controls = ({
+  scalesMaxMin,
   zoomEnabled,
   onToggleZoom,
   panEnabled,
@@ -28,6 +29,7 @@ export const Controls = ({
       overflowContainer
       content={
         <Layer
+          scalesMaxMin={scalesMaxMin}
           zoomEnabled={zoomEnabled}
           onToggleZoom={onToggleZoom}
           panEnabled={panEnabled}

package/src/components/line-chart/Controls/Layer.jsx

@@ -16,6 +16,7 @@ import {
 import styles from './Controls.module.less';
 
 export const Layer = ({
+  scalesMaxMin,
   zoomEnabled,
   onToggleZoom,
   panEnabled,
@@ -92,60 +93,62 @@ export const Layer = ({
             )}
             <p>
               <strong>Change axis: </strong>
-              <span>hold shit key</span>
+              <span>hold shift key</span>
             </p>
           </div>
           <Spacer height={10} />
         </>
       )}
-      {axes.map((axis, i) => (
-        <Field key={i} label={axis.label || ''}>
-          <InputGroup small>
-            <Input
-              name="min"
-              value={axis.min.inputValue}
-              error={
-                !axis.min.valid
-                  ? 'WARNING' //t(InputWarningType.MustBeNumericAndLessThanMax)
-                  : undefined
-              }
-              size={5}
-              width="100%"
-              onChange={(evt) =>
-                onSetAxisValue({
-                  name: evt.target.name,
-                  value: evt.target.value,
-                  id: axis.id,
-                })
-              }
-              disabled={zoomEnabled || panEnabled}
-            />
-            <InputGroupAddon>
-              To
-              {/*t(translations.to)*/}
-            </InputGroupAddon>
-            <Input
-              name="max"
-              value={axis.max.inputValue}
-              error={
-                !axis.max.valid
-                  ? 'Warning' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
-                  : undefined
-              }
-              size={5}
-              width="100%"
-              onChange={(evt) =>
-                onSetAxisValue({
-                  name: evt.target.name,
-                  value: evt.target.value,
-                  id: axis.id,
-                })
-              }
-              disabled={zoomEnabled || panEnabled}
-            />
-          </InputGroup>
-        </Field>
-      ))}
+      {axes.map((axis, i) => {
+        return (
+          <Field key={i} label={axis.label || ''}>
+            <InputGroup small>
+              <Input
+                name="min"
+                value={axis.min.inputValue || scalesMaxMin[axis?.id]?.min}
+                error={
+                  !axis.min.valid
+                    ? 'WARNING' //t(InputWarningType.MustBeNumericAndLessThanMax)
+                    : undefined
+                }
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onSetAxisValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                disabled={zoomEnabled || panEnabled}
+              />
+              <InputGroupAddon>
+                To
+                {/*t(translations.to)*/}
+              </InputGroupAddon>
+              <Input
+                name="max"
+                value={axis.max.inputValue || scalesMaxMin[axis?.id].max}
+                error={
+                  !axis.max.valid
+                    ? 'Warning' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
+                    : undefined
+                }
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onSetAxisValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                disabled={zoomEnabled || panEnabled}
+              />
+            </InputGroup>
+          </Field>
+        );
+      })}
       <Field>
         <Button
           small