@oliasoft-open-source/charts-library 2.4.6 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.4.6",
+  "version": "2.5.1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [

package/release-notes.md

@@ -1,5 +1,15 @@
 # Charts Library Release Notes
 
+## 2.5.1
+
+- Added resize delay for performance
+
+## 2.5.0
+
+- Separate controls for points/lines, axes options, legend, download
+- Standard control for table
+- Box zoom
+
 ## 2.4.6
 
 - Fix Multiple X Axes example in LineChart

package/src/assets/icons/line-and-point.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path d="m7.937 6.5c-.11122.42912-.36179.80916-.71237 1.08047-.35058.2713-.78133.4185-1.22463.4185s-.87405-.1472-1.22463-.4185c-.35058-.27131-.60115-.65135-.71237-1.08047h-3.563v-1h3.563c.11122-.42912.36179-.80916.71237-1.08046s.78133-.41851 1.22463-.41851.87405.14721 1.22463.41851.60115.65134.71237 1.08046h3.563v1z" fill="currentColor"/></g></svg>

package/src/assets/icons/line-only.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path d="m.5 6.5v-1h11v1c-4.16104 0-6.63549 0-11 0z" fill="currentColor"/></g></svg>

package/src/assets/icons/list-hide.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h12v12h-12z"/></clipPath><g clip-path="url(#a)"><path clip-rule="evenodd" d="m1.85351 1.14645-.35356-.353558-.707103.707108.353553.35355.39645.39645c-.02813.07955-.0429.16401-.0429.25 0 .19891.07902.38968.21967.53033.14066.14065.33142.21967.53033.21967.08599 0 .17045-.01477.25-.04289l2.2929 2.29289h-.7929v1h1.7929l2.5 2.5h-4.2929v1h5.2929l.85355.8536.3536.3535.7071-.7071-.3536-.3536-.3535-.35351v-.79289h-.79294l-2.5-2.5h3.29294v-1h-4.29294l-3.25-3.25c-.03694-.10448-.09692-.20048-.17678-.28033-.07985-.07985-.17585-.13984-.28033-.17678zm8.64649.85355h-6.50005v1h6.50005zm-8.78038 4.53033c.14066.14065.33142.21967.53033.21967.19892 0 .38968-.07902.53033-.21967.14066-.14065.21967-.33142.21967-.53033s-.07901-.38968-.21967-.53033c-.14065-.14065-.33141-.21967-.53033-.21967-.19891 0-.38967.07902-.53033.21967-.14065.14065-.21967.33142-.21967.53033s.07902.38968.21967.53033zm0 3.45c.14066.14067.33142.21967.53033.21967.19892 0 .38968-.079.53033-.21967.14066-.14065.21967-.33142.21967-.53033s-.07901-.38968-.21967-.53033c-.14065-.14065-.33141-.21967-.53033-.21967-.19891 0-.38967.07902-.53033.21967-.14065.14065-.21967.33142-.21967.53033s.07902.38968.21967.53033z" fill="currentColor" fill-rule="evenodd"/></g></svg>

package/src/assets/icons/point-only.svg

@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" fill="currentColor" r="2"/></svg>

package/src/components/bar-chart/bar-chart.jsx

@@ -199,6 +199,7 @@ const BarChart = (props) => {
         options={{
           onClick,
           onHover,
+          resizeDelay: 50,
           indexAxis: isVertical(options.direction) ? AxisType.X : AxisType.Y,
           maintainAspectRatio: chartStyling.maintainAspectRatio,
           animation: {

package/src/components/controls/axes-options.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import {
+  Button,
+  Field,
+  Flex,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  Popover,
+  Text,
+  Tooltip,
+} from '@oliasoft-open-source/react-ui-library';
+import { RiRuler2Line } from 'react-icons/ri';
+
+const AxesOptionsPopover = ({
+  onResetAxes,
+  axes,
+  onSetAxisValue,
+  panEnabled,
+  scalesMaxMin,
+  zoomEnabled,
+  close,
+}) => {
+  const isCustomValue =
+    axes.filter((axis) => axis.max.displayValue || axis.min.displayValue)
+      .length > 0;
+  const handleInputFocus = (e) => e.target.select();
+  return (
+    <>
+      {axes.map((axis, i) => {
+        // TODO: Translate strings
+        if (!axis.min || !axis.max) return null;
+        return (
+          <Field key={i} label={axis.label || axis.id || ''}>
+            <InputGroup small>
+              <Input
+                name="min"
+                // TODO: Fix input values not updating first time when scales reset
+                value={axis.min.inputValue || scalesMaxMin[axis?.id]?.min}
+                error={
+                  !axis.min.valid
+                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndLessThanMax)
+                    : undefined
+                }
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onSetAxisValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+                disabled={zoomEnabled || panEnabled}
+              />
+              <InputGroupAddon>
+                to
+                {/*t(translations.to)*/}
+              </InputGroupAddon>
+              <Input
+                name="max"
+                // TODO: Fix input values not updating first time when scales reset
+                value={axis.max.inputValue || scalesMaxMin[axis?.id]?.max}
+                error={
+                  !axis.max.valid
+                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
+                    : undefined
+                }
+                size={5}
+                width="100%"
+                onChange={(evt) =>
+                  onSetAxisValue({
+                    name: evt.target.name,
+                    value: evt.target.value,
+                    id: axis.id,
+                  })
+                }
+                onFocus={handleInputFocus}
+                disabled={zoomEnabled || panEnabled}
+              />
+            </InputGroup>
+            {/* TODO: Add units */}
+          </Field>
+        );
+      })}
+      <Flex gap="8px" alignItems="center">
+        <Button small colored label="Done" onClick={close} />
+        <Button
+          small
+          name="resetAxes"
+          label="Reset Axes"
+          onClick={onResetAxes}
+          disabled={!isCustomValue}
+        />
+        <Text small muted>
+          or click on canvas
+        </Text>
+      </Flex>
+    </>
+  );
+};
+
+export const AxesOptions = ({
+  onResetAxes,
+  axes,
+  onSetAxisValue,
+  panEnabled,
+  scalesMaxMin,
+  zoomEnabled,
+}) => {
+  return (
+    <Popover
+      placement="bottom"
+      overflowContainer
+      content={
+        <AxesOptionsPopover
+          onResetAxes={onResetAxes}
+          axes={axes}
+          onSetAxisValue={onSetAxisValue}
+          panEnabled={panEnabled}
+          scalesMaxMin={scalesMaxMin}
+          zoomEnabled={zoomEnabled}
+        />
+      }
+    >
+      <Tooltip text="Axes options" placement="bottom" display="flex">
+        <Button small basic colored="muted" round icon={<RiRuler2Line />} />
+      </Tooltip>
+    </Popover>
+  );
+};

package/src/components/controls/controls.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import {
+  RiFileDownloadLine,
+  RiLineChartLine,
+  RiTableLine,
+} from 'react-icons/ri';
+import { LineOptions } from './line-options';
+import { DragOptions } from './drag-options';
+import { AxesOptions } from './axes-options';
+import { LegendOptions } from './legend-options';
+import styles from './controls.module.less';
+
+const Controls = ({
+  axes,
+  chart,
+  headerComponent,
+  legendEnabled,
+  lineEnabled,
+  onDownload,
+  onResetAxes,
+  onSetAxisValue,
+  onToggleLegend,
+  onToggleLine,
+  onTogglePan,
+  onTogglePoints,
+  onToggleTable,
+  onToggleZoom,
+  panEnabled,
+  pointsEnabled,
+  scalesMaxMin,
+  showTable,
+  subheaderComponent,
+  table,
+  zoomEnabled,
+}) => {
+  return (
+    <>
+      <div className={styles.controls}>
+        <div>{headerComponent || <Text bold>{chart.options.title}</Text>}</div>
+        <div className={styles.buttons}>
+          {!showTable && (
+            <>
+              <AxesOptions
+                onResetAxes={onResetAxes}
+                axes={axes}
+                onSetAxisValue={onSetAxisValue}
+                panEnabled={panEnabled}
+                scalesMaxMin={scalesMaxMin}
+                zoomEnabled={zoomEnabled}
+              />
+              <LineOptions
+                lineEnabled={lineEnabled}
+                pointsEnabled={pointsEnabled}
+                onToggleLine={onToggleLine}
+                onTogglePoints={onTogglePoints}
+              />
+              <LegendOptions
+                legendEnabled={legendEnabled}
+                onToggleLegend={onToggleLegend}
+              />
+              <DragOptions
+                panEnabled={panEnabled}
+                zoomEnabled={zoomEnabled}
+                onTogglePan={onTogglePan}
+                onToggleZoom={onToggleZoom}
+              />
+              {/* TODO: implement usetranslation */}
+              <Tooltip text="Download as PNG" placement="bottom-end">
+                <Button
+                  small
+                  basic
+                  colored="muted"
+                  round
+                  icon={<RiFileDownloadLine />}
+                  onClick={onDownload}
+                />
+              </Tooltip>
+            </>
+          )}
+
+          {table ? (
+            <Tooltip
+              text={showTable ? 'Show chart' : 'Show table'}
+              placement="bottom-end"
+            >
+              {/* TODO: implement usetranslation */}
+              <Button
+                small
+                basic
+                colored="muted"
+                round
+                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
+                onClick={onToggleTable}
+              />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+      {subheaderComponent}
+    </>
+  );
+};
+
+export default Controls;

package/src/components/controls/controls.module.less

@@ -0,0 +1,12 @@
+.controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.buttons {
+  display: flex;
+  margin-left: auto;
+  gap: 4px;
+}

package/src/components/controls/drag-options.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  Button,
+  Flex,
+  Text,
+  Tooltip,
+} from '@oliasoft-open-source/react-ui-library';
+import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
+
+export const DragOptions = ({
+  onTogglePan,
+  onToggleZoom,
+  panEnabled,
+  zoomEnabled,
+}) => {
+  // TODO: Translate strings
+  const options = [
+    {
+      label: (
+        <Flex direction="column">
+          <Text>Drag to zoom</Text>
+          {/* <Text small muted>
+            Hold shift to change axis
+          </Text> */}
+          <Text small muted>
+            Click on canvas to reset
+          </Text>
+        </Flex>
+      ),
+      icon: <RiZoomInLine />,
+      selected: zoomEnabled,
+      onClick: () => {
+        onToggleZoom();
+        onTogglePan();
+      },
+    },
+    {
+      label: (
+        <Flex direction="column">
+          <Text>Drag to pan</Text>
+          {/* <Text small muted>
+            Hold shift to change axis
+          </Text> */}
+          <Text small muted>
+            Click on canvas to reset
+          </Text>
+        </Flex>
+      ),
+      icon: <RiDragMove2Line />,
+      selected: panEnabled,
+      onClick: () => {
+        onTogglePan();
+      },
+    },
+    {
+      label: 'Drag disabled',
+      icon: <RiForbidLine />,
+      selected: !zoomEnabled && !panEnabled,
+      onClick: () => {
+        onToggleZoom();
+      },
+    },
+  ];
+  const selectedOption = options.filter((option) => option.selected)[0];
+  return (
+    <Tooltip text={selectedOption.label} placement="bottom-end">
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={selectedOption.icon}
+        onClick={selectedOption.onClick}
+      />
+    </Tooltip>
+  );
+};

package/src/components/controls/legend-options.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import { RiListUnordered } from 'react-icons/ri';
+import listHideIcon from '../../assets/icons/list-hide.svg';
+
+export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
+  // TODO: Translate strings
+  return (
+    <Tooltip
+      text={legendEnabled ? 'Legend shown' : 'Legend hidden'}
+      placement="bottom"
+    >
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={
+          legendEnabled ? <RiListUnordered /> : <Icon icon={listHideIcon} />
+        }
+        onClick={onToggleLegend}
+      />
+    </Tooltip>
+  );
+};

package/src/components/controls/line-options.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import lineOnlyIcon from '../../assets/icons/line-only.svg';
+import pointOnlyIcon from '../../assets/icons/point-only.svg';
+import lineAndPointIcon from '../../assets/icons/line-and-point.svg';
+
+export const LineOptions = ({
+  lineEnabled,
+  onToggleLine,
+  onTogglePoints,
+  pointsEnabled,
+}) => {
+  // TODO: Translate strings
+  const options = [
+    {
+      label: 'Points & lines',
+      icon: <Icon icon={lineAndPointIcon} />,
+      selected: pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+      },
+    },
+    {
+      label: 'Lines only',
+      icon: <Icon icon={lineOnlyIcon} />,
+      selected: !pointsEnabled && lineEnabled,
+      onClick: () => {
+        onTogglePoints();
+        onToggleLine();
+      },
+    },
+    {
+      label: 'Points only',
+      icon: <Icon icon={pointOnlyIcon} />,
+      selected: pointsEnabled && !lineEnabled,
+      onClick: () => {
+        onToggleLine();
+      },
+    },
+  ];
+  const selectedOption = options.filter((option) => option.selected)[0];
+  return (
+    <Tooltip text={selectedOption.label} placement="bottom">
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={selectedOption.icon}
+        onClick={selectedOption.onClick}
+      />
+    </Tooltip>
+  );
+};

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 
 export const LineChartPropTypes = {
+  table: PropTypes.node,
   chart: PropTypes.shape({
     testId: PropTypes.string,
     data: PropTypes.object.isRequired,

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

@@ -28,10 +28,11 @@ import {
   TOGGLE_LINE,
   TOGGLE_PAN,
   TOGGLE_POINTS,
+  TOGGLE_TABLE,
   TOGGLE_ZOOM,
   UNSET_AXES_VALUES,
 } from './state/action-types';
-import { Controls } from './Controls/Controls';
+import Controls from '../controls/controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
 import getLineChartScales from './get-line-chart-scales';
 import getLineChartToolTips from './get-line-chart-tooltips';
@@ -95,6 +96,7 @@ const LineChart = (props) => {
   let pointHover = false;
   const chart = getDefaultProps(props);
   const { options, testId } = chart;
+  const { headerComponent, subheaderComponent, table } = props;
 
   const {
     additionalAxesOptions,
@@ -106,8 +108,7 @@ const LineChart = (props) => {
     interactions,
     legend,
   } = options;
-  const { showLine, showPoints, enableZoom, enablePan, closeOnOutsideClick } =
-    chartOptions;
+  const { showLine, showPoints, enableZoom, enablePan } = chartOptions;
 
   /**
    * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
@@ -392,93 +393,106 @@ const LineChart = (props) => {
       onKeyUp={handleKeyUp}
       data-testid={testId}
     >
-      <div className={styles.zoomForm}>
-        <Controls
-          scalesMaxMin={getScalesMaxMin()}
-          axes={controlsAxes}
-          legendEnabled={state.legendEnabled}
-          lineEnabled={state.lineEnabled}
-          panEnabled={state.panEnabled}
-          pointsEnabled={state.pointsEnabled}
-          zoomEnabled={state.zoomEnabled}
-          onSetAxisValue={(evt) =>
-            dispatch({ type: SET_AXIS_VALUE, payload: evt })
-          }
-          onResetAxes={() => {
-            dispatch({ type: UNSET_AXES_VALUES });
-          }}
-          onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
-          onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
-          onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
-          onTogglePoints={() => dispatch({ type: TOGGLE_POINTS })}
-          onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
-          onDownload={handleDownload}
-          closeOnOutsideClick={closeOnOutsideClick}
-        />
-      </div>
-      <Line
-        ref={chartRef}
-        data={{
-          datasets: generatedDatasets,
+      <Controls
+        axes={controlsAxes}
+        chart={chart}
+        headerComponent={headerComponent}
+        legendEnabled={state.legendEnabled}
+        lineEnabled={state.lineEnabled}
+        onDownload={handleDownload}
+        onResetAxes={() => {
+          dispatch({ type: UNSET_AXES_VALUES });
         }}
-        options={{
-          onClick,
-          onHover,
-          maintainAspectRatio:
-            chartStyling.squareAspectRatio || chartStyling.maintainAspectRatio,
-          aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
-          animation: {
-            duration: chartStyling.performanceMode
-              ? ANIMATION_DURATION.NO
-              : ANIMATION_DURATION.FAST,
-          },
-          hover: {
-            mode: ChartHoverMode.Nearest,
-            intersect: true,
-            animationDuration: chartStyling.performanceMode
-              ? ANIMATION_DURATION.NO
-              : ANIMATION_DURATION.SLOW,
-          },
-          elements: {
-            line: {
-              pointStyle: PointStyle.Circle,
-              showLine: state.lineEnabled,
-            },
-          },
-          scales: getLineChartScales(options, state),
-          plugins: {
-            title: getTitle(options),
-            datalabels: getLineChartDataLabels(options),
-            annotation: getAnnotation(options, state),
-            zoom: {
-              pan: {
-                enabled: state.panEnabled,
-                mode: PanZoomMode.X,
-                onPanComplete({ chart }) {
-                  setAxisValuesInSettings(chart);
+        onSetAxisValue={(evt) =>
+          dispatch({ type: SET_AXIS_VALUE, payload: evt })
+        }
+        onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
+        onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
+        onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
+        onTogglePoints={() => dispatch({ type: TOGGLE_POINTS })}
+        onToggleTable={() => dispatch({ type: TOGGLE_TABLE })}
+        onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
+        panEnabled={state.panEnabled}
+        pointsEnabled={state.pointsEnabled}
+        scalesMaxMin={getScalesMaxMin()}
+        showTable={state.showTable}
+        subheaderComponent={subheaderComponent}
+        table={table}
+        zoomEnabled={state.zoomEnabled}
+      />
+      {table && state.showTable ? (
+        <div className={styles.table}>{table}</div>
+      ) : (
+        <div className={styles.canvas}>
+          <Line
+            ref={chartRef}
+            data={{
+              datasets: generatedDatasets,
+            }}
+            options={{
+              onClick,
+              onHover,
+              resizeDelay: 50,
+              maintainAspectRatio: chartStyling.maintainAspectRatio,
+              aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
+              animation: {
+                duration: chartStyling.performanceMode
+                  ? ANIMATION_DURATION.NO
+                  : ANIMATION_DURATION.FAST,
+              },
+              hover: {
+                mode: ChartHoverMode.Nearest,
+                intersect: true,
+                animationDuration: chartStyling.performanceMode
+                  ? ANIMATION_DURATION.NO
+                  : ANIMATION_DURATION.SLOW,
+              },
+              elements: {
+                line: {
+                  pointStyle: PointStyle.Circle,
+                  showLine: state.lineEnabled,
                 },
               },
-              zoom: {
-                mode: PanZoomMode.X,
-                drag: {
-                  enabled: state.zoomEnabled,
-                  threshold: 3,
+              scales: getLineChartScales(options, state),
+              plugins: {
+                // title: getTitle(options),
+                datalabels: getLineChartDataLabels(options),
+                annotation: getAnnotation(options, state),
+                zoom: {
+                  pan: {
+                    enabled: state.panEnabled,
+                    mode: PanZoomMode.XY,
+                    onPanComplete({ chart }) {
+                      setAxisValuesInSettings(chart);
+                    },
+                  },
+                  zoom: {
+                    mode: PanZoomMode.XY,
+                    drag: {
+                      enabled: state.zoomEnabled,
+                      threshold: 3,
+                      backgroundColor: 'rgba(0,0,0,0.1)',
+                      borderColor: 'rgba(0,0,0,0.2)',
+                      borderWidth: 1,
+                    },
+                    onZoomComplete({ chart }) {
+                      setAxisValuesInSettings(chart);
+                    },
+                  },
                 },
-                onZoomComplete({ chart }) {
-                  setAxisValuesInSettings(chart);
+                tooltip: getLineChartToolTips(options),
+                legend: getLegend(options, legendClick, state),
+                [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+                  .customLegendPlugin && {
+                  containerID:
+                    options.legend.customLegend.customLegendContainerID,
                 },
               },
-            },
-            tooltip: getLineChartToolTips(options),
-            legend: getLegend(options, legendClick, state),
-            [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
-              .customLegendPlugin && {
-              containerID: options.legend.customLegend.customLegendContainerID,
-            },
-          },
-        }}
-        plugins={getPlugins(graph, legend, state)}
-      />
+            }}
+            plugins={getPlugins(graph, legend, state)}
+          />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/line-chart/line-chart.module.less

@@ -5,12 +5,18 @@ html[data-theme='dark'] .chart canvas {
 
 .chart {
   border: 1px solid rgba(255, 255, 255, 0);
-  padding-top: 10px;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; // Spacing between each section
 
-  canvas {
-    width: 100% !important; // Fix for resizing bug
-    height: 100% !important; // Remove if stretched when maintainAspectRatio=true
+  .canvas {
+    flex-grow: 1;
+    min-height: 0; // Prevents chart exceeding available space
+    canvas {
+      width: 100% !important; // Fix for resizing bug
+      height: 100% !important; // Remove if stretched when maintainAspectRatio=true
+    }
   }
 
   &.fixedHeight {
@@ -34,7 +40,7 @@ html[data-theme='dark'] .chart canvas {
   }
 
   &:focus {
-    border: 1px solid #85b7d9;
+    // border: 1px solid #85b7d9;
     outline: none; // Remove dotted outline on FF
   }
 
@@ -65,3 +71,7 @@ html[data-theme='dark'] .chart canvas {
   width: auto;
   height: auto;
 }
+
+.table {
+  overflow: auto;
+}

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

@@ -1,4 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  Flex,
+  Menu,
+  Slider,
+  Table,
+  Text,
+  Toggle,
+} from '@oliasoft-open-source/react-ui-library';
 import { LineChart } from './line-chart';
 import { getCustomLegendPlugin } from '../../helpers/get-custom-legend-plugin-example';
 
@@ -156,6 +164,7 @@ FillContainer.args = {
     options: {
       ...basicChart.options,
       chartStyling: {
+        ...basicChart.options.chartStyling,
         height: '100%',
       },
     },
@@ -169,6 +178,17 @@ FillContainer.decorators = [
   ),
 ];
 
+export const NoTitle = Template.bind({});
+NoTitle.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: undefined,
+    },
+  },
+};
+
 export const DataGaps = Template.bind({});
 DataGaps.args = {
   chart: {
@@ -426,19 +446,6 @@ Animation.args = {
   },
 };
 
-export const CloseControlsOnOutsideClick = Template.bind({});
-CloseControlsOnOutsideClick.args = {
-  chart: {
-    ...basicChart,
-    options: {
-      ...basicChart.options,
-      chartOptions: {
-        closeOnOutsideClick: true,
-      },
-    },
-  },
-};
-
 export const SquareAspectRatio = Template.bind({});
 SquareAspectRatio.args = {
   chart: {
@@ -454,6 +461,116 @@ SquareAspectRatio.args = {
   },
 };
 
+export const HeaderComponent = (args) => {
+  const options = ['Category A', 'Category B', 'Category C'];
+
+  const suboptions = ['Chart 1', 'Chart 2', 'Chart 3'];
+
+  const charts = options.map((option) => ({
+    label: option,
+    options: suboptions.map((suboption) => ({
+      label: suboption,
+      options: {
+        label: `${option} - ${suboption}`,
+      },
+    })),
+  }));
+
+  const [selectedChartTitle, setSelectedChartTitle] = useState(
+    `${options[0]} - ${suboptions[0]}`,
+  );
+
+  const chart = {
+    ...basicChart,
+    options: { ...basicChart.options, title: selectedChartTitle },
+  };
+
+  return (
+    <LineChart
+      chart={chart}
+      headerComponent={
+        <Flex gap="10px" alignItems="center">
+          <Text bold>
+            <Menu
+              menu={{
+                label: selectedChartTitle,
+                sections: charts.map((option) => ({
+                  type: 'Menu',
+                  trigger: 'Text',
+                  menu: {
+                    label: option.label,
+                    trigger: 'Text',
+                    sections: option.options.map((suboption) => ({
+                      label: suboption.label,
+                      type: 'Option',
+                      onClick: () =>
+                        setSelectedChartTitle(
+                          `${option.label} - ${suboption.label}`,
+                        ),
+                    })),
+                  },
+                })),
+                trigger: 'Text',
+                small: true,
+              }}
+            />
+          </Text>
+          <Toggle label="Toggle" onChange={() => {}} noMargin />
+        </Flex>
+      }
+    />
+  );
+};
+
+export const SubheaderComponent = Template.bind({});
+SubheaderComponent.args = {
+  subheaderComponent: (
+    <Slider max={100} min={0} onChange={() => {}} showArrows value={50} />
+  ),
+};
+
+const table = {
+  headers: [
+    {
+      cells: [
+        { value: 'Name' },
+        { value: 'Weight' },
+        { value: 'Energy' },
+        { value: 'Origin' },
+      ],
+    },
+  ],
+  rows: [
+    {
+      cells: [
+        { value: 'Brown rice' },
+        { value: 100 },
+        { value: 361 },
+        { value: 'Vietnam' },
+      ],
+    },
+    {
+      cells: [
+        { value: 'Buckwheat' },
+        { value: 50 },
+        { value: 358 },
+        { value: 'Poland' },
+      ],
+    },
+    {
+      cells: [
+        { value: 'Couscous' },
+        { value: 10 },
+        { value: 368 },
+        { value: 'France' },
+      ],
+    },
+  ],
+};
+
+export const WithTable = (args) => {
+  return <LineChart chart={basicChart} table={<Table table={table} />} />;
+};
 export const SquareAspectRatioFillContainer = Template.bind({});
 SquareAspectRatioFillContainer.args = {
   chart: {

package/src/components/line-chart/state/action-types.js

@@ -7,3 +7,4 @@ export const UNSET_AXES_VALUES = 'UNSET_AXES_VALUES';
 export const SET_AXIS_VALUE = 'SET_AXIS_VALUE';
 export const SET_POINTS_ZOOM_DEFAULTS = 'SET_POINTS_ZOOM_DEFAULTS';
 export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
+export const TOGGLE_TABLE = 'TOGGLE_TABLE';

package/src/components/line-chart/state/initial-state.js

@@ -45,6 +45,7 @@ const initialState = ({
     legendEnabled: legendDisplay !== false,
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
+    showTable: false,
   };
 };
 

package/src/components/line-chart/state/line-chart-reducer.js

@@ -15,6 +15,7 @@ import {
   SET_AXIS_VALUE,
   SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
+  TOGGLE_TABLE,
 } from './action-types';
 import { getAxisValue } from '../../../helpers/chart-utils';
 
@@ -64,6 +65,12 @@ export const reducer = (state, action) => {
         legendEnabled: !newState.legendEnabled,
       };
     }
+    case TOGGLE_TABLE: {
+      return {
+        ...newState,
+        showTable: !newState.showTable,
+      };
+    }
     case UNSET_AXES_VALUES: {
       return {
         ...newState,

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

@@ -413,6 +413,7 @@ const PieChart = (props) => {
             animationDuration: options.chartStyling.performanceMode ? 0 : 400,
           },
           onHover,
+          resizeDelay: 50,
           elements: {
             pie: {
               pointStyle: 'circle',

package/src/helpers/enums.js

@@ -77,6 +77,7 @@ export const ChartHoverMode = Object.freeze({
 export const PanZoomMode = Object.freeze({
   X: 'x',
   Y: 'y',
+  XY: 'xy',
 });
 
 export const Key = Object.freeze({

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { FaCog } from 'react-icons/fa';
-import { Popover, Button } from '@oliasoft-open-source/react-ui-library';
-import { Layer } from './Layer';
-
-export const Controls = ({
-  scalesMaxMin,
-  zoomEnabled,
-  onToggleZoom,
-  panEnabled,
-  onTogglePan,
-  legendEnabled,
-  onToggleLegend,
-  onResetAxes,
-  pointsEnabled,
-  onTogglePoints,
-  lineEnabled,
-  onToggleLine,
-  axes,
-  onSetAxisValue,
-  onDownload,
-  closeOnOutsideClick,
-}) => {
-  return (
-    <Popover
-      placement="bottom-start"
-      closeOnOutsideClick={closeOnOutsideClick}
-      showCloseButton
-      overflowContainer
-      content={
-        <Layer
-          scalesMaxMin={scalesMaxMin}
-          zoomEnabled={zoomEnabled}
-          onToggleZoom={onToggleZoom}
-          panEnabled={panEnabled}
-          onTogglePan={onTogglePan}
-          onResetAxes={onResetAxes}
-          legendEnabled={legendEnabled}
-          onToggleLegend={onToggleLegend}
-          pointsEnabled={pointsEnabled}
-          onTogglePoints={onTogglePoints}
-          lineEnabled={lineEnabled}
-          onToggleLine={onToggleLine}
-          axes={axes}
-          onSetAxisValue={onSetAxisValue}
-          onDownload={onDownload}
-        />
-      }
-    >
-      <Button
-        name="example"
-        colored="muted"
-        onClick={() => {}}
-        basic
-        round
-        small
-        icon={<FaCog />}
-      />
-    </Popover>
-  );
-};

package/src/components/line-chart/Controls/Controls.module.less

@@ -1,21 +0,0 @@
-.layer {
-  width: 200px;
-}
-.help {
-  font-size: 0.8rem;
-  color: #666;
-
-  p {
-    margin-bottom: 5px;
-  }
-}
-
-.reset {
-  display: flex;
-  align-items: center;
-  span {
-    margin-left: 5px;
-    font-size: 10px;
-    color: #666;
-  }
-}

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

@@ -1,172 +0,0 @@
-import React from 'react';
-//import { useTranslation } from 'react-i18next';
-import { HiOutlineDocumentDownload } from 'react-icons/hi';
-import {
-  Button,
-  Toggle,
-  Spacer,
-  Field,
-  Input,
-  InputGroup,
-  InputGroupAddon,
-  Text,
-} from '@oliasoft-open-source/react-ui-library';
-//import translations from '~common/Internationalisation/translation-map.json';
-//import { InputWarningType } from '~common/const/warning-messages';
-import styles from './Controls.module.less';
-
-export const Layer = ({
-  scalesMaxMin,
-  zoomEnabled,
-  onToggleZoom,
-  panEnabled,
-  onTogglePan,
-  onResetAxes,
-  legendEnabled,
-  onToggleLegend,
-  pointsEnabled,
-  onTogglePoints,
-  lineEnabled,
-  onToggleLine,
-  axes,
-  onSetAxisValue,
-  onDownload,
-}) => {
-  // TODO: implement usetranslation
-  //const { t } = useTranslation();
-  return (
-    <div className={styles.layer}>
-      <Toggle
-        small
-        name="enablePoints"
-        label="Enable Points" //{t(translations.showPoints)}  temporary static value before translation is implemented
-        checked={pointsEnabled}
-        onChange={onTogglePoints}
-      />
-      <Spacer height={8} />
-      <Toggle
-        small
-        name="enableLine"
-        label="Show line"
-        checked={lineEnabled}
-        onChange={onToggleLine}
-      />
-      <Spacer height={8} />
-      <Toggle
-        small
-        name="enableLegend"
-        label="Enable Legend" //{t(translations.showLegend)}  temporary static value before translation is implemented
-        checked={legendEnabled}
-        onChange={onToggleLegend}
-      />
-      <Spacer height={8} />
-      <Toggle
-        small
-        name="enableZoom"
-        label="Enable Zoom" //{t(translations.enableZoom)}  temporary static value before translation is implemented
-        checked={zoomEnabled}
-        onChange={onToggleZoom}
-      />
-      <Spacer height={8} />
-      <Toggle
-        small
-        name="enablePan"
-        label="Enable Pan" //{t(translations.enablePan)}  temporary static value before translation is implemented
-        checked={panEnabled}
-        onChange={onTogglePan}
-      />
-      <Spacer height={10} />
-      {(zoomEnabled || panEnabled) && (
-        <>
-          <div className={styles.help}>
-            {zoomEnabled && (
-              <p>
-                <strong>Zoom: </strong>
-                <span>click and drag</span>
-              </p>
-            )}
-            {panEnabled && (
-              <p>
-                <strong>Pan: </strong>
-                <span>click and drag</span>
-              </p>
-            )}
-            <p>
-              <strong>Change axis: </strong>
-              <span>hold shift key</span>
-            </p>
-          </div>
-          <Spacer height={10} />
-        </>
-      )}
-      {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
-                    ? 'Invalid value' //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
-                    ? 'Invalid value' //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
-          name="resetAxes"
-          label="Reset Axes"
-          onClick={onResetAxes}
-        />{' '}
-        <Text small muted>
-          or click on canvas
-        </Text>
-      </Field>
-      <Spacer height={8} />
-      <Button
-        label="Download PNG" //{t(translations.downloadPNG)}
-        small
-        onClick={onDownload}
-        icon={<HiOutlineDocumentDownload />}
-      />
-    </div>
-  );
-};