@sis-cc/dotstatsuite-components 20.6.0 → 21.0.1

package/.gitlab-ci.yml

@@ -5,13 +5,14 @@ stages:
   - publish
 
 variables:
-  NODE_VERSION: node:18-alpine
+  NODE_VERSION: node:24-alpine
 
 setup:
   stage: setup
   image: $NODE_VERSION
   script:
     - yarn
+    - yarn peers
   artifacts:
     paths:
       - node_modules/
@@ -23,7 +24,7 @@ test:
     - chmod +x ./node_modules/web-component-env/src/wce-test
   script:
     - yarn test
-  coverage: /All files\s*.\[0m \|.\[31;1m\s*([\d\.]+)/
+  coverage: '/All files\s*\|\s*(\d+\.\d+)%/'
   dependencies:
     - setup
 
@@ -32,9 +33,7 @@ build:
   image: $NODE_VERSION
   artifacts:
     paths:
-      - lib/
-  before_script:
-    - chmod +x ./node_modules/web-component-env/src/wce-build
+      - dist/
   script:
     - yarn build
 

package/README.md

@@ -1,19 +1,3 @@
 # dotstatsuite-components
 
-This library regroup a set of React components that were originally separated in their own git repositories.
-Those components are:
-  - [bridge-d3-react](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/bridge-d3-react/README.md)
-  - [chart](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/chart/README.md)
-  - [rules](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/rules/README.md)
-  - [rules-driver](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/rules-driver/README.md)
-  - [share](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-components/blob/master/src/share/README.md)
-
-Unlike other libraries as [dotstatsuite-ui-components](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-ui-components), this library doesn't focus only on UI design, but also on data parsing and deduced behaviour, like the visualisation charts.
-
-## setup
-
-- install: `npm i @sis-cc/dotstatsuite-components`
-
-## usage
-
-see individuals readme files of the components
+Set components based on React.

package/package.json

@@ -1,31 +1,33 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "20.6.0",
-  "main": "lib/index.js",
+  "version": "21.0.1",
   "type": "module",
+  "module": "./dist/dotstatsuite-components.js",
+  "engines": {
+    "node": ">=18"
+  },
   "author": "OECD",
   "license": "MIT",
   "scripts": {
-    "build": "wce build",
-    "start": "wce start",
+    "peers": "install-peers --force-run",
+    "build": "vite build",
     "test": "wce test"
   },
   "devDependencies": {
-    "web-component-env": "^2.0.0"
+    "@rollup/plugin-replace": "^6.0.2",
+    "@sis-cc/dotstatsuite-d3-charts": "^9.2.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "install-peers-cli": "^2.2.0",
+    "ramda": "^0.26.1",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "vite": "^5.4.9",
+    "web-component-env": "^2.9.10"
   },
   "dependencies": {
     "@react-hook/size": "^2.1.1",
-    "@sis-cc/dotstatsuite-d3-charts": "^9.1.2",
-    "@sis-cc/dotstatsuite-sdmxjs": "^10.1.0",
-    "@sis-cc/dotstatsuite-visions": "^12.8.0",
-    "date-fns": "^1.30.1",
     "lodash": "^4.17.2",
-    "lodash.compose": "^2.4.1",
-    "memoizee": "^0.4.4",
-    "numeral": "^2.0.6",
-    "prop-types": "^15.6.2",
-    "ramda": "^0.26.1"
+    "memoizee": "^0.4.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,6 +35,10 @@
     "@mui/icons-material": "^5",
     "@mui/material": "^5",
     "@mui/styles": "^5",
+    "@sis-cc/dotstatsuite-sdmxjs": "~10.1.0",
+    "@sis-cc/dotstatsuite-visions": "~12.27.0",
+    "date-fns": "^1.30.1",
+    "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18"
   }

package/src/bridge-d3-react/src/react-chart-factory.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { isFunction, cloneDeep } from 'lodash';
 
 export default D3Chart => class ReactChart extends Component {
   constructor(props) {
@@ -48,7 +47,7 @@ export default D3Chart => class ReactChart extends Component {
 
   componentWillUnmount() {
     super.componentWillUnmount && super.componentWillUnmount();
-    
+
     this.chart && this.chart.destroy && this.chart.destroy(this.refs.chart);
   }
 

package/src/rules/src/factories/sample-series.js

@@ -1,4 +1,4 @@
-import { get, map, reduce, sortBy, head, isEmpty, isFunction, isNil, split } from 'lodash';
+import { map, sortBy, head, isEmpty, isNil, split } from 'lodash';
 import { categoryDisplay } from '../dimension-utils';
 import { getFormatedObservation } from '../observation-formater';
 

package/src/rules/src/index.js

@@ -3,7 +3,6 @@ import {
   filter, find, includes, isArray, findIndex, isEqual
 } from 'lodash';
 import * as R from 'ramda';
-import compose from 'lodash.compose';
 import memoizee from 'memoizee';
 import __sampleSeries from './factories/sample-series';
 import __sampleFocus from './factories/sample-focus';
@@ -29,7 +28,7 @@ export const freqQ = FREQ_Q;
 export const freqM = FREQ_M;
 
 // --------------------------------------------------------------------------------extractSdmxErrors
-const _extractSdmxErrors = (data) => compose(
+const _extractSdmxErrors = (data) => R.compose(
   (errors) => map(errors, (error) => ({ label: error.code, description: error.message })),
   (data) => get(data, 'errors', [])
 );
@@ -85,15 +84,15 @@ export const getDimensionValues = (dimension) => get(dimension, 'values', []);
 const _splitDimensions = (data) => {
   const { dimensions } = extractSdmxArtefacts(data);
   const [value, values] = partition(
-    reject(dimensions, compose(isEmpty, getDimensionValues)),
-    compose((values) => size(values) === 1, getDimensionValues)
+    reject(dimensions, R.compose(isEmpty, getDimensionValues)),
+    R.compose((values) => size(values) === 1, getDimensionValues)
   );
   return { value, values };
 }
 export const splitDimensions = memoizee(_splitDimensions);
 
 // ------------------------------------------------------------------dimensionsWithValuesIndexedById
-const _dimensionsWithValuesIndexedById = (data) => compose(
+const _dimensionsWithValuesIndexedById = (data) => R.compose(
   (dimensionsWithValues) => keyBy(dimensionsWithValues, 'id'),
   (split) => split.values,
   splitDimensions
@@ -212,11 +211,11 @@ const _source = (data, config, meta) => {
     return null;
   const source = get(config, 'source', null);
   if (source && !(isEmpty(source)))
-    return source; 
+    return source;
   const artefacts = extractSdmxArtefacts(data);
   const uri = get(artefacts, 'source');
-  if (!uri) 
-    return get(config, 'defaultSource', null); 
+  if (!uri)
+    return get(config, 'defaultSource', null);
   const match = uri.match(/(^http.*)\/SDMX-JSON\/data\/([^\/]+)\//);
   if (size(match) !== 3)
     return null;
@@ -232,20 +231,20 @@ const _focus = (data, type, dimension, _display) => {
     case 'RowChart': case 'BarChart':
     case 'HorizontalSymbolChart': case 'VerticalSymbolChart':
     case 'StackedBarChart': case 'StackedRowChart':
-      return compose(
+      return R.compose(
         (datapoints) => map(datapoints, (dp) => ({ label: dp.category, value: dp.key })),
         (series) => series[0].datapoints,
         series
       )(data, type, null, dimension, null, display);
     case 'TimelineChart':
-      return compose(
+      return R.compose(
         (series) => map(series, (serie) => ({ label: serie.category, value: serie.key })),
         series
       )(data, type, null, dimension, null, display)
     case 'ScatterChart':
       const id = get(dimension, 'id');
       if (isNil(id)) return [];
-      const dimensions = compose(
+      const dimensions = R.compose(
         (dimensions) => omit(dimensions, id),
         dimensionsWithValuesIndexedById
       )(data);
@@ -324,7 +323,7 @@ export const headerUprsLabel = display => uprAttributes => {
   ).join(', ');
 }
 
-export const getUprs = (data, display) => compose(
+export const getUprs = (data, display) => R.compose(
   headerUprsLabel(parseDisplay(display)),
   uprAttributesWithOneRelevantValue,
   ({ attributes }) => uprAttributes(attributes),
@@ -338,7 +337,7 @@ const _header = (data, _title, _subtitle, _display) => {
   return ({
     title,
     subtitle: isArray(subtitle) ? subtitle : [subtitle],
-    uprs: compose(
+    uprs: R.compose(
       headerUprsLabel(display),
       uprAttributesWithOneRelevantValue,
       ({ attributes }) => uprAttributes(attributes),
@@ -395,3 +394,5 @@ export { isSharedLayoutCompatible } from './layout';
 
 export { getObservations } from './preparators/getObservations';
 
+export const getFlags = R.identity;
+export const prepareData = R.identity;

package/src/rules/src/observation-formater.js

@@ -1,7 +1,6 @@
 import memoizee from 'memoizee';
 import numeral from 'numeral';
 import * as R from 'ramda';
-import { isNan } from 'lodash';
 import { extractSdmxArtefacts } from './';
 
 export const DEFAULT_PREFSCALE_ATTR_IDS = ["PREF_SCALE"];

package/src/rules/src/properties/focus.js

@@ -1,7 +1,7 @@
 import * as R from 'ramda';
 import { extractSdmxArtefacts, focus } from '../';
-import { BAR, ROW, SCATTER, TIMELINE, TYPES } from '../constants';
-import { toSingularity, hasFocus } from './utils';
+import { BAR, ROW, TIMELINE } from '../constants';
+import { hasFocus } from './utils';
 
 const sampleFocusTypes = { [BAR]: BAR, [ROW]: ROW, [TIMELINE]: TIMELINE };
 
@@ -63,7 +63,7 @@ export const focusStateFromNewProps = ({ data, display, type }, singularity, sta
 
 export const sampleFocusStateFromNewProps = (props, state) => {
   if (!R.has(props.type, sampleFocusTypes) || R.isNil(props.data)) {
-    return ({}); //no changes 
+    return ({}); //no changes
   }
   return focusStateFromNewProps(props, null, state);
 };

package/src/rules/src/sdmx-data/index.js

@@ -35,3 +35,5 @@ export const getIsHidden = annotations => R.pipe(
   R.find(R.propEq('type', NOT_DISPLAYED)),
   R.complement(R.isNil)
 )(annotations);
+
+export const getFullName = R.identity;

package/src/viewer/src/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import * as R from 'ramda';
-import cx from 'classnames';
 import useSize from '@react-hook/size';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
 import { makeStyles, useTheme } from '@mui/styles';
@@ -72,10 +71,10 @@ const Viewer = ({ type, targets={}, width, ...rest }) => {
   return (
     <div
       {...(targets.viewer ? { ref: targets.viewer } : {})}
-      className={cx(classes.container, {
-        [classes.tableContainer]: type === 'table',
-        [classes.chartContainer]: type !== 'table'
-      })}
+      className={[
+        classes.container,
+        type === 'table' ? classes.tableContainer : classes.chartContainer
+      ]}
     >
       <Header
         target={targets.header}

package/src/viewer/src/legends/AxisLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import makeStyles from '@mui/styles/makeStyles';
 import { SCATTER } from '../../../rules/src/constants';
@@ -39,10 +38,4 @@ const AxisLegend = ({ axis, data, type }) => {
   }
 };
 
-AxisLegend.propTypes = {
-  axis: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
 export default AxisLegend;

package/src/viewer/src/legends/FocusLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Legend from './Legend';
 import { SCATTER, TIMELINE } from '../../../rules/src/constants';
@@ -22,11 +21,11 @@ const FocusLegend = ({ data, options, type, width }) => {
   if (width < REDUCED_THRESHOLD) {
     return null;
   }
-  
+
   const itemRenderer = R.pipe(
     R.when(R.always(type === SCATTER), R.always(scatterRenderer)),
     R.when(R.always(type === TIMELINE), R.always(lineRenderer)),
-  )(null); 
+  )(null);
 
   const getItemLabel = R.ifElse(
     R.equals(SCATTER),
@@ -61,11 +60,4 @@ const FocusLegend = ({ data, options, type, width }) => {
   return (<Legend items={items} itemRenderer={itemRenderer} />);
 }
 
-FocusLegend.propTypes = {
-  data: PropTypes.object,
-  options: PropTypes.object,
-  type: PropTypes.string,
-  width: PropTypes.number
-};
-
 export default FocusLegend;

package/src/viewer/src/legends/Legend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import makeStyles from '@mui/styles/makeStyles';
 import { getFontFromTheme } from '../utils';
@@ -44,9 +43,4 @@ const Legend = ({ items, itemRenderer }) => {
  return (<div className={classes.legend} >{legendEntries}</div>);
 };
 
-Legend.propTypes = {
-  itemRenderer: PropTypes.func,
-  items: PropTypes.array
-};
-
 export default Legend;

package/src/viewer/src/legends/SeriesLegend.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Legend from './Legend';
 import { H_SYMBOL, STACKED_BAR, STACKED_ROW, V_SYMBOL } from '../../../rules/src/constants';
@@ -76,10 +75,4 @@ const SeriesLegend = ({ data, options, type }) => {
   );
 };
 
-SeriesLegend.propTypes = {
-  data: PropTypes.object,
-  options: PropTypes.object,
-  type: PropTypes.string,
-};
-
 export default SeriesLegend;

package/vite.config.mjs

@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { visualizer } from "rollup-plugin-visualizer";
+import replace from '@rollup/plugin-replace';
+import { dependencies, peerDependencies } from './package.json';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    visualizer({
+      open: false, // auto-open in browser
+      gzipSize: true,
+      brotliSize: true,
+    }),
+    replace({
+      preventAssignment: true,
+      delimiters: ['', ''],
+      values: {
+        'var d3_document = this.document;':
+          'var d3_document = globalThis.document;',
+        'this[d3_vendorSymbol(this, "requestAnimationFrame")]':
+          'globalThis[d3_vendorSymbol(globalThis, "requestAnimationFrame")]',
+        'this.navigator && /WebKit/.test(this.navigator.userAgent)':
+          'globalThis.navigator && /WebKit/.test(globalThis.navigator.userAgent)',
+      },
+    })
+  ],
+  build: {
+    minify: false,
+    lib: {
+      entry: 'src/index.js',
+      name: '@sis-cc/dotstatsuite-components',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: (id) => {
+        const externals = [
+          ...Object.keys(peerDependencies || {}),
+          ...Object.keys(dependencies || {}),
+        ];
+        return externals.some(pkg => id === pkg || id.startsWith(pkg + '/'));
+      },
+    },
+  },
+  // can be removed when all jsx files will have .jsx extension
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.jsx?$/,
+    exclude: [],
+  }
+});

package/lib/app.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _client = require('react-dom/client');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var container = document.getElementById('root');
-var root = (0, _client.createRoot)(container);
-
-var App = function App() {
-  return _react2.default.createElement(
-    _react.StrictMode,
-    null,
-    'I\'m not groot, I\'m component'
-  );
-};
-
-root.render(_react2.default.createElement(App, null));

package/lib/bridge-d3-react/src/app.js

@@ -1,98 +0,0 @@
-'use strict';
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _size2 = require('lodash/size');
-
-var _size3 = _interopRequireDefault(_size2);
-
-var _range2 = require('lodash/range');
-
-var _range3 = _interopRequireDefault(_range2);
-
-var _map2 = require('lodash/map');
-
-var _map3 = _interopRequireDefault(_map2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _ = require('./');
-
-var _mockChoro = require('./mock-choro');
-
-var _mockChoro2 = _interopRequireDefault(_mockChoro);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _render(id, chart) {
-  var root = document.createElement('div');
-  root.id = id;
-  document.getElementById('root').appendChild(root);
-  (0, _reactDom.render)(chart, root);
-}
-
-var datapoints = [{ label: 'label1', x: -90, y: -4 }, { label: 'label2', x: 110, y: 10 }, { label: 'label3', x: 120, y: 14 }, { label: 'label4', x: 137, y: 22 }, { label: 'label5', x: 155, y: 36 }, { label: 'label6', x: 268, y: 37, baselineIndex: 0 }, { label: 'label7', x: 320, y: 41, highlightIndex: 0 }, { label: 'label8', x: 569, y: 89, highlightIndex: 1 }];
-
-var barData = [{ datapoints: datapoints }];
-var rowData = [{ datapoints: (0, _map3.default)(datapoints, function (dp) {
-    return (0, _extends3.default)({}, dp, { x: dp.y, y: dp.x });
-  }) }];
-var scatterData = [{ datapoints: (0, _map3.default)(datapoints, function (dp) {
-    return (0, _extends3.default)({}, dp, { x: dp.y });
-  }) }];
-var lineFuncs = [function (x) {
-  return 10 * x + 7;
-}, function (x) {
-  return x * 2 + 4;
-}, function (x) {
-  return x * .3 + 20;
-}, function (x) {
-  return x * 4 + 14;
-}, function (x) {
-  return x * .8 - 4;
-}, function (x) {
-  return Math.pow(x, .5) + 5;
-}, function (x) {
-  return x * (x / 40);
-}, function (x) {
-  return x * (x / 40) * (x / 40);
-}];
-var lineData = (0, _map3.default)((0, _range3.default)((0, _size3.default)(lineFuncs)), function (r, i) {
-  return {
-    datapoints: (0, _map3.default)((0, _range3.default)(50), function (j) {
-      return { x: 2 * j + 1, y: lineFuncs[i % (0, _size3.default)(lineFuncs)](2 * j + 1) };
-    }),
-    baselineIndex: i == 0 ? i : -1,
-    highlightIndex: i == 2 || i == 7 ? i : -1
-  };
-});
-var options = {
-  base: {
-    width: 800,
-    height: 400,
-    isAnnotated: true
-  },
-  legend: {
-    choropleth: {
-      width: 300,
-      height: 50
-    }
-  }
-};
-var log = function log(options) {
-  return console.log(options);
-};
-
-_render('root1', _react2.default.createElement(_.BarChart, { options: options, data: barData, getInitialOptions: log }));
-_render('root2', _react2.default.createElement(_.RowChart, { options: options, data: rowData }));
-_render('root3', _react2.default.createElement(_.ScatterChart, { options: options, data: scatterData }));
-_render('root4', _react2.default.createElement(_.LineChart, { options: options, data: lineData }));
-_render('root5', _react2.default.createElement(_.TimelineChart, { options: options, data: lineData }));
-_render('root6', _react2.default.createElement(_.ChoroplethChart, { options: options, data: _mockChoro2.default }));
-_render('root7', _react2.default.createElement(_.ChoroplethLegend, { options: options, data: _mockChoro2.default }));

package/lib/bridge-d3-react/src/index.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChoroplethLegend = exports.ChoroplethChart = exports.StackedRowChart = exports.StackedBarChart = exports.HorizontalSymbolChart = exports.VerticalSymbolChart = exports.TimelineChart = exports.SymbolChart = exports.LineChart = exports.ScatterChart = exports.RowChart = exports.BarChart = undefined;
-
-var _react = require('react');
-
-var _reactChartFactory = require('./react-chart-factory');
-
-var _reactChartFactory2 = _interopRequireDefault(_reactChartFactory);
-
-var _dotstatsuiteD3Charts = require('@sis-cc/dotstatsuite-d3-charts');
-
-var rcwCharts = _interopRequireWildcard(_dotstatsuiteD3Charts);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var BarChart = exports.BarChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.BarChart));
-var RowChart = exports.RowChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.RowChart));
-var ScatterChart = exports.ScatterChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.ScatterChart));
-var LineChart = exports.LineChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.LineChart));
-var SymbolChart = exports.SymbolChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.SymbolChart));
-var TimelineChart = exports.TimelineChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.TimelineChart));
-var VerticalSymbolChart = exports.VerticalSymbolChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.VerticalSymbolChart));
-var HorizontalSymbolChart = exports.HorizontalSymbolChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.HorizontalSymbolChart));
-var StackedBarChart = exports.StackedBarChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.StackedBarChart));
-var StackedRowChart = exports.StackedRowChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.StackedRowChart));
-var ChoroplethChart = exports.ChoroplethChart = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.ChoroplethChart));
-var ChoroplethLegend = exports.ChoroplethLegend = (0, _react.createFactory)((0, _reactChartFactory2.default)(rcwCharts.ChoroplethLegend));