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

package/.storybook/main.js

@@ -1,3 +1,4 @@
+const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const getRules = require('../webpack/webpack.common.rules.js');
 const resolve = require('../webpack/webpack.resolve.js').resolve;
@@ -5,36 +6,31 @@ const resolve = require('../webpack/webpack.resolve.js').resolve;
 module.exports = {
   stories: ['../src/components/**/*.stories.@(js|jsx|mdx)'],
   addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-storysource',
-    '@storybook/addon-docs',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        sourceLoaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    'storybook-dark-mode',
   ],
+  features: {
+    modernInlineRender: true,
+  },
   core: {
     builder: 'webpack5',
   },
-  webpackFinal: (config) => {
-    const rules = getRules('development');
-
-    config.module.rules = []; //delete default storybook rules because they conflict (postcss causes a conflict)
-
-    rules.forEach((r) => {
-      config.module.rules.push(r);
-    });
-
-    return {
-      ...config,
-      module: {
-        ...config.module,
-        rules: [...rules], //attach our own rules from the application webpack config
-      },
+  webpackFinal: (config) =>
+    merge(config, {
+      module: { rules: getRules('development') },
       plugins: [
-        ...config.plugins,
         new MiniCssExtractPlugin({
           filename: '[name].css',
         }),
       ],
       resolve,
-    };
-  },
+    }),
 };

package/.storybook/preview.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useDarkMode } from 'storybook-dark-mode';
+import { themes } from '@storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs';
+import '@oliasoft-open-source/react-ui-library/src/style/global.less';
+import './storybook.less';
+
+/**
+ * Dark mode for GUI Library components (i.e. Controls)
+ */
+export const decorators = [
+  (Story) => {
+    document.documentElement.setAttribute(
+      'data-theme',
+      useDarkMode() ? 'dark' : 'default',
+    );
+    return <Story />;
+  },
+];
+
+export const parameters = {
+  /**
+   * Fix for dark mode docs from https://github.com/hipstersmoothie/storybook-dark-mode/issues/180
+   */
+  docs: {
+    container: (props) => {
+      const isDark = useDarkMode();
+      const { id: storyId, storyById } = props.context;
+      const {
+        parameters: { docs = {} },
+      } = storyById(storyId);
+      docs.theme = isDark ? themes.dark : themes.light;
+
+      return React.createElement(DocsContainer, props);
+    },
+  },
+};

package/.storybook/storybook.less

@@ -0,0 +1,8 @@
+/**
+* Fix for Firefox story height bug
+*/
+@-moz-document url-prefix() {
+  .docs-story > div > div {
+    height: 100% !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {
@@ -69,6 +69,7 @@
     "prettier": "2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "storybook-dark-mode": "^1.1.0",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",

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

@@ -71,6 +71,10 @@ export const BarChartPropTypes = {
         display: PropTypes.bool,
         position: PropTypes.oneOf(['top', 'bottom', 'right']),
         align: PropTypes.oneOf(['start', 'center', 'end']),
+        customLegend: PropTypes.shape({
+          customLegendPlugin: PropTypes.object,
+          customLegendContainerID: PropTypes.string,
+        }),
       }),
       chartOptions: PropTypes.shape({
         enableZoom: PropTypes.bool,
@@ -96,6 +100,8 @@ export const getDefaultProps = (props) => {
   props.chart.options.graph = props.chart.options.graph || {};
   props.chart.options.annotations = props.chart.options.annotations || {};
   props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend
+    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
   props.chart.options.chartOptions = props.chart.options.chartOptions || {};
   props.chart.options.interactions = props.chart.options.interactions || {};
   // Set defaults for missing properties
@@ -165,6 +171,7 @@ export const getDefaultProps = (props) => {
             : true,
         position: props.chart.options.legend.position || 'bottom',
         align: props.chart.options.legend.align || 'center',
+        customLegend: props.chart.options.legend.customLegend,
       },
       chartOptions: {
         enableZoom: props.chart.options.chartOptions.enableZoom || false,

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   BarElement,
   CategoryScale,
@@ -36,6 +36,7 @@ import {
   ANIMATION_DURATION,
   AUTO,
   COLORS,
+  CUSTOM_LEGEND_PLUGIN_NAME,
   DARK_MODE_COLORS,
   DEFAULT_COLOR,
   DEFAULT_DARK_MODE_BORDER_COLOR,
@@ -234,9 +235,13 @@ const BarChart = (props) => {
             }),
             tooltip: getBarChartToolTips(options),
             legend: getLegend(options, legendClick),
+            [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+              .customLegendPlugin && {
+              containerID: options.legend.customLegend.customLegendContainerID,
+            },
           },
         }}
-        plugins={getPlugins(graph)}
+        plugins={getPlugins(graph, options.legend)}
       />
     </div>
   );