@sis-cc/dotstatsuite-components 22.0.1 → 22.0.3

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

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+
+export default D3Chart => class ReactChart extends Component {
+  constructor(props) {
+    super(props);
+    // shouldComponentUpdate is useful to determine isDirty
+    // but can't be used alone since we still want to update meta
+    this.needD3Update = true;
+    this.chart = null;
+  }
+
+  componentDidMount() {
+    super.componentDidMount && super.componentDidMount();
+
+    if (!this.needD3Update) return;
+
+    this.chart = new D3Chart(
+      this.refs.chart,
+      this.props.options,
+      this.props.data,
+      this.props.getInitialOptions,
+      this.props.getAxisOptions
+    );
+
+    this.needD3Update = false;
+
+    /*if (isFunction(this.props.getInitialOptions)) {
+      this.props.getInitialOptions(cloneDeep(this.chart.options));
+    }*/
+  }
+
+  componentDidUpdate() {
+    super.componentDidUpdate && super.componentDidUpdate();
+
+    if (!this.needD3Update) return;
+
+    this.chart && this.chart.update && this.chart.update(
+      this.refs.chart,
+      this.props.options,
+      this.props.data,
+      this.props.getInitialOptions,
+      this.props.getAxisOptions
+    );
+
+    this.needD3Update = false;
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount && super.componentWillUnmount();
+
+    this.chart && this.chart.destroy && this.chart.destroy(this.refs.chart);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    super.shouldComponentUpdate && super.shouldComponentUpdate(nextProps);
+
+    this.needD3Update = this.props.data !== nextProps.data || this.props.options !== nextProps.options;
+
+    return true;
+  }
+
+  render() {
+    return <div ref="chart"></div>;
+  }
+};

package/src/index.js

@@ -0,0 +1,10 @@
+//import { createRequire } from 'node:module';
+//const require = createRequire(import.meta.url);
+//const pkg = require('../package.json');
+//
+//console.info(`${pkg.name}@${pkg.version}`);
+
+export * as rules from './rules/src';
+export * as rules2 from './rules2/src';
+
+export { default as Viewer } from './viewer/src/index.jsx';

package/src/rules/README.md

@@ -0,0 +1,23 @@
+# rules
+
+The library scopes business logic regarding sdmx parsing and refining. This library is responsible for generating table and charts data series from sdmx data.
+
+## usage
+
+```javascript
+import { rules } from '@sis-cc/dotstatsuite-components';
+
+rules.extractSdmxArtefacts(data);
+```
+
+## misc
+
+Top-level methods are memoized to have a good performance.  
+Factory methods have been extracted from a component and are not yet memoized.
+
+The memoization has been used to make the library easy to use, parsing methods can be heavy
+regarding data and being forced to use them carefully generally lead to complexity.
+
+## api
+
+TODO

package/src/rules/src/chart/getAxisOptions.js

@@ -0,0 +1,263 @@
+import * as R from 'ramda';
+import numeral from 'numeral';
+import dateFns from 'date-fns';
+import isMonday from 'date-fns/is_monday';
+import isTuesday from 'date-fns/is_tuesday';
+import isWednesday from 'date-fns/is_wednesday';
+import isThursday from 'date-fns/is_thursday';
+import isFriday from 'date-fns/is_friday';
+import isSaturday from 'date-fns/is_saturday';
+import isSunday from 'date-fns/is_sunday';
+import getISOWeek from 'date-fns/get_iso_week';
+import { getLocale, dateWithoutTZ } from '../date';
+import {
+  BAR,
+  CHORO,
+  H_SYMBOL,
+  ROW,
+  SCATTER,
+  STACKED_BAR,
+  STACKED_ROW,
+  TIMELINE,
+  V_SYMBOL
+} from '../constants';
+
+const defaultTimeFormats = {
+  A: 'YYYY',
+  S: 'YYYY-[S][SEMESTER]',
+  Q: 'YYYY-[Q]Q',
+  M: 'YYYY-MMM',
+  W: 'YYYY-[W]WW',
+  B: 'YYYY-[W]WW',
+  D: 'YYYY-MM-DD',
+  H: 'YYYY-MM-DD[T]HH:mm:ss',
+  N: 'YYYY-MM-DD[T]HH:mm:ss',
+};
+
+export const getTimeProc = (frequency, timeFormats = {}, locale) => {
+  if (frequency === 'W' || frequency === 'B') {
+    return datum => {
+      const isoWeek = getISOWeek(datum);
+      if (isoWeek !== 1) {
+        return dateFns.format(datum, 'YYYY-[W]WW', { locale: getLocale(locale) })
+      }
+      const seventhDay = dateFns.endOfWeek(datum, { weekStartsOn: 1 });
+      return dateFns.format(seventhDay, 'YYYY-[W]WW', { locale: getLocale(locale) })
+    }
+  }
+  const format = R.pipe(
+    R.mergeRight(defaultTimeFormats),
+    R.ifElse(
+      R.has(frequency),
+      R.prop(frequency),
+      R.prop('A')
+    )
+  )(timeFormats);
+  return datum => dateFns.format(dateWithoutTZ(new Date(datum)), format, { locale: getLocale(locale) });
+};
+
+const getTimeFrequency = (data) => {
+  const frequency = R.prop('frequency', data);
+  if (frequency === 'W' || frequency === 'B') {
+    const date = R.pathOr(['series', 0, 'datapoints', 'x']);
+    return R.cond([
+      [isMonday, R.always('monday')],
+      [isTuesday, R.always('tueday')],
+      [isWednesday, R.always('wednesday')],
+      [isThursday, R.always('thursday')],
+      [isFriday, R.always('friday')],
+      [isSaturday, R.always('saturday')],
+      [isSunday, R.always('sunday')],
+      [R.T, R.always('monday')],
+    ])(date);
+  }
+  return R.cond([
+    [R.equals('A'), R.always('year')],
+    [R.equals('S'), R.always('month')],
+    [R.equals('Q'), R.always('month')],
+    [R.equals('M'), R.always('month')],
+    [R.equals('D'), R.always('day')],
+    [R.equals('H'), R.always('hour')],
+    [R.equals('N'), R.always('minute')],
+    [R.T, R.always('year')],
+  ])(frequency);
+};
+
+const getTimeStep = R.cond([
+  [R.equals('A'), R.always(1)],
+  [R.equals('S'), R.always(6)],
+  [R.equals('Q'), R.always(3)],
+  [R.equals('M'), R.always(1)],
+  [R.equals('W'), R.always(1)],
+  [R.equals('B'), R.always(1)],
+  [R.equals('D'), R.always(1)],
+  [R.equals('H'), R.always(1)],
+  [R.equals('N'), R.always(1)],
+  [R.T, R.always(1)],
+]);
+
+export const getAxisOptions = (data, type, options, timeFormats, locale) => {
+
+  const axis = {
+    linear: { pivot: { color: 'white' } },
+    ordinal: { gap: .3, padding: .3 },
+    thickness: 0,
+  };
+
+  const linearProc = d => {
+    if (Math.abs(d) < 0.01 && d) {
+      return numeral(d).format('0.[00]e+0');
+    }
+    return numeral(d).format('0,0.[00]');
+  };
+
+  return R.pipe(
+    R.propOr({}, 'axis'),
+    R.mergeDeepRight({ x: axis, y: axis }),
+    R.cond([
+      [
+        R.always(R.equals(BAR, type)),
+        R.pipe(
+          R.mergeDeepRight({
+            x: { format: { proc: R.identity }, tick: { thickness: 0, size: 0 } },
+            y: {
+              font: { baseline: 'ideographic' },
+              format: { proc: linearProc },
+              padding: 10,
+              tick: { thickness: 0 },
+            }
+          }),
+          R.over(R.lensPath(['y', 'linear', 'pivot', 'value']), R.when(R.isNil, R.always(0)))
+        )
+      ],
+      [
+        R.always(R.equals(ROW, type)),
+        R.pipe(
+          R.mergeDeepRight({
+            x: {
+              format: { proc: linearProc },
+              orient: 'top',
+              padding: 10,
+              tick: { thickness: 0 },
+            },
+            y: {
+              format: { proc: R.identity },
+              ordinal: { minDisplaySize: 300 },
+              tick: { thickness: 0, size: 0 },
+            }
+          }),
+          R.over(R.lensPath(['x', 'linear', 'pivot', 'value']), R.when(R.isNil, R.always(0)))
+        )
+      ],
+      [
+        R.always(R.equals(SCATTER, type)),
+        R.mergeDeepRight({
+          x: {
+            format: { proc: linearProc },
+            tick: { thickness: 0, size: 0 },
+          },
+          y: {
+            font: { baseline: 'ideographic' },
+            format: { proc: linearProc },
+            padding: 10,
+            tick: { thickness: 0 },
+          }
+        })
+      ],
+      [
+        R.always(R.equals(TIMELINE, type)),
+        R.pipe(
+          R.mergeDeepRight({
+            x: {
+              format: {
+                isTime: true,
+                pattern: null,
+                proc: getTimeProc(R.prop('frequency', data), timeFormats, locale)
+              },
+              tick: { size: -6, minorSize: -3, thickness: 2, minorThickness: 2, color: 'white' },
+            },
+            y: {
+              font: { baseline: 'ideographic' },
+              format: { proc: d => numeral(d).format('0,0.[00]') },
+              padding: 10,
+              tick: { thickness: 0 },
+            }
+          }),
+          R.evolve({
+            x: R.pipe(
+              R.set(R.lensPath(['linear', 'frequency']), getTimeFrequency(data)),
+              R.set(R.lensPath(['linear', 'step']), getTimeStep(R.prop('frequency', data))),
+              R.over(
+                R.lensPath(['tick', 'step']),
+                R.pipe(R.when(R.isNil, R.always(1)), R.multiply(getTimeStep(R.prop('frequency', data))))
+              )
+            )
+          })
+        )
+      ],
+      [
+        R.always(R.equals(H_SYMBOL, type)),
+        R.mergeDeepRight({
+          x: {
+            format: { proc: linearProc },
+            orient: 'top',
+            padding: 10,
+            tick: { thickness: 0 },
+          },
+          y: {
+            format: { proc: R.identity },
+            ordinal: { minDisplaySize: 300 },
+            tick: { thickness: 0, size: 5 },
+          }
+        })
+      ],
+      [
+        R.always(R.equals(V_SYMBOL, type)),
+        R.mergeDeepRight({
+          x: { format: { proc: R.identity }, tick: { thickness: 0, size: 0 } },
+          y: {
+            font: { baseline: 'ideographic' },
+            format: { proc: linearProc },
+            padding: 10,
+            tick: { thickness: 0 },
+          }
+        })
+      ],
+      [
+        R.always(R.equals(STACKED_BAR, type)),
+        R.pipe(
+          R.mergeDeepRight({
+            x: { format: { proc: R.identity }, tick: { thickness: 0, size: 0 } },
+            y: {
+              font: { baseline: 'ideographic' },
+              format: { proc: linearProc },
+              padding: 10,
+              tick: { thickness: 0 },
+            }
+          }),
+          R.over(R.lensPath(['y', 'linear', 'pivot', 'value']), R.when(R.isNil, R.always(0)))
+        )
+      ],
+      [
+        R.always(R.equals(STACKED_ROW, type)),
+        R.pipe(
+          R.mergeDeepRight({
+            x: {
+              format: { proc: linearProc },
+              orient: 'top',
+              padding: 10,
+              tick: { thickness: 0 },
+            },
+            y: {
+              format: { proc: R.identity },
+              ordinal: { minDisplaySize: 300 },
+              tick: { thickness: 0, size: 0 }
+            }
+          }),
+          R.over(R.lensPath(['x', 'linear', 'pivot', 'value']), R.when(R.isNil, R.always(0)))
+        )
+      ],
+      [R.T, R.identity]
+    ])
+  )(options);
+};

package/src/rules/src/chart/getBaseOptions.js

@@ -0,0 +1,84 @@
+import * as R from 'ramda';
+import {
+  BAR,
+  CHORO,
+  H_SYMBOL,
+  ROW,
+  SCATTER,
+  STACKED_BAR,
+  STACKED_ROW,
+  TIMELINE,
+  V_SYMBOL
+} from '../constants';
+
+export const getBaseOptions = (type, options) => R.pipe(
+  R.propOr({}, 'base'),
+  R.cond([
+    [
+      R.always(R.equals(BAR, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 100,
+        minDisplayWidth: 300,
+        padding: { top: 20 },
+        innerPadding: { left: 20, right: 20, bottom: 10 }
+      })
+    ],
+    [
+      R.always(R.equals(ROW, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 300,
+        minDisplayWidth: 100,
+        padding: { top: 10, left: 10, right: 20 }
+      })
+    ],
+    [
+      R.always(R.equals(SCATTER, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 100,
+        minDisplayWidth: 100,
+        padding: { top: 40, right: 10 }
+      })
+    ],
+    [
+      R.always(R.equals(TIMELINE, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 300,
+        minDisplayWidth: 100,
+        isAnnotated: false,
+        padding: { top: 20 },
+        innerPadding: { left: 40, right: 40 }
+      })
+    ],
+    [
+      R.always(R.equals(H_SYMBOL, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 300,
+        minDisplayWidth: 100,
+        padding: { top: 10, left: 10, right: 20 }
+      })
+    ],
+    [
+      R.always(R.equals(V_SYMBOL, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 100,
+        minDisplayWidth: 300,
+        padding: { top: 20 },
+        innerPadding: { left: 20, right: 20, bottom: 10 }
+      })
+    ],
+    [
+      R.always(R.equals(STACKED_BAR, type)),
+      R.mergeDeepRight({
+        minDisplayHeight: 100,
+        minDisplayWidth: 300,
+        padding: { top: 20 },
+        innerPadding: { left: 20, right: 20, bottom: 10 }
+      })
+    ],
+    [
+      R.always(R.equals(STACKED_ROW, type)),
+      R.mergeDeepRight({ padding: { top: 10, left: 10, right: 20 } })
+    ],
+    [R.T, R.identity]
+  ])
+)(options);

package/src/rules/src/chart/getChartOptions.js

@@ -0,0 +1,118 @@
+import * as R from 'ramda'; 
+import numeral from 'numeral';
+import { getAxisOptions } from './getAxisOptions';
+import { getBaseOptions } from './getBaseOptions';
+import { getGridOptions } from './getGridOptions';
+import { getTooltipOptions } from './getTooltipOptions';
+import { SCATTER, STACKED_BAR, STACKED_ROW, TIMELINE } from '../constants';
+
+export const FOCUS_COLORS = {
+  highlightColors: ['#E73741', '#0F8FD9', '#993484', '#DF521E', '#719E24', '#E1B400', '#32A674', '#0B68AF'],
+  baselineColors: ['#0B1E2D']
+};
+
+export const symbolMarkers = () => {
+  const paths = {
+    circle: size => {
+      const r = Math.sqrt(size) / 2;
+      return `M0,${r} A${r},${r} 0 1,1 0,${-r} A${r},${r} 0 1,1 0,${r} Z`;
+    },
+    square: size => {
+      const r = Math.sqrt(size) / 2;
+      return `M${-r},${-r} L${r},${-r} ${r},${r} ${-r},${r} Z`;
+    },
+    cross: size => {
+      const r = Math.sqrt(size) / 2;
+      return `M${-r},${r} L${r},${-r} M${r},${r} L${-r},${-r}`;
+    },
+    'triangle': size => {
+      const rx = Math.sqrt(size) / Math.sqrt(3);
+      const ry = Math.sqrt(size) / 2;
+      return `M0,${-ry} L${rx},${ry} ${-rx},${ry} Z`;
+    }
+  }
+  return ([
+    { style: { stroke: '#39617D', fill: '#39617D' }, path: paths.circle },
+    { style: { stroke: '#39617D', fill: '#DBEBF2' }, rotate: 45, path: paths.square },
+    { style: { stroke: '#39617D', fill: '#39617D', strokeWidth: 2 }, path: paths.cross },
+    { style: { stroke: '#39617D', fill: '#DBEBF2' }, path: paths.square },
+    { style: { stroke: '#39617D', fill: '#39617D' }, path: paths.triangle }
+  ]);
+};
+
+const getAnnotationOptions = (type, options) => R.pipe(
+  R.pathOr({}, ['serie', 'annotation']),
+  R.mergeRight({
+    format: {
+      datapoint: { proc: d => numeral(d).format('0,0.[00]') }
+    }
+  }),
+  R.cond([
+    [
+      R.always(R.equals(SCATTER, type)),
+      R.mergeRight({ display: 'never' })
+    ],
+    [
+      R.always(R.equals(TIMELINE, type)),
+      R.mergeDeepRight({ format: { datapoint: { pattern: '.2f' } } })
+    ],
+    [R.T, R.identity]
+  ])
+)(options);
+
+export const getChartOptions = (data, type, options, tooltipFonts, timeFormats, locale) => {
+  const defaultSerieColors = R.ifElse(
+    R.anyPass([R.equals(STACKED_BAR), R.equals(STACKED_ROW)]),
+    R.always(['#607D8B']),
+    R.always(['#8EA4B1'])
+  )(type);
+
+  return ({
+    axis: getAxisOptions(data, type, options, timeFormats, locale),
+    background: R.pipe(
+      R.propOr({}, 'background'),
+      R.mergeRight({ color: '#DBEBF2' })
+    )(options),
+    base: getBaseOptions(type, options),
+    grid: getGridOptions(type, options),
+    map: R.pipe(
+      R.propOr({}, 'map'),
+      R.mergeRight({ intBoundariesColor: '#8EA4B1' })
+    )(options),
+    serie: {
+      ...R.propOr({}, 'serie', options),
+      annotation: getAnnotationOptions(type, options),
+      choropleth: R.pipe(
+        R.pathOr({}, ['serie', 'choropleth']),
+        R.mergeRight({
+          divisions: 4,
+          domain: 'YlorRd',
+          invert: false,
+          labelDisplay: 'none',
+        })
+      )(options),
+      stacked: R.pipe(
+        R.pathOr({}, ['serie', 'stacked']),
+        R.mergeRight({ strokeThickness: 1, strokeColor: '#F8FAFC' })
+      )(options),
+      symbol: R.pipe(
+        R.pathOr({}, ['serie', 'symbol']),
+        R.mergeRight({
+          markers: symbolMarkers(),
+          markerDefaultSize: 60,
+          markerDefaultStrokeWidth: 1,
+          gapMinMaxColor: '#607D8B',
+          gapMinMaxThickness: 1,
+          gapAxisMinColor: 'white',
+          gapAxisMinThickness: 1
+        })
+      )(options),
+      colors: R.pathOr(defaultSerieColors, ['serie', 'colors'], options),
+      overColors: R.pathOr(['#39617D'], ['serie', 'overColors'], options),
+      highlightColors: R.pathOr(FOCUS_COLORS.highlightColors, ['serie', 'highlightColors'], options),
+      baselineColors: R.pathOr(FOCUS_COLORS.baselineColors, ['serie', 'baselineColors'], options),
+      tooltip: getTooltipOptions(data, type, options, tooltipFonts, timeFormats, locale)
+    }
+  });
+};
+

package/src/rules/src/chart/getGridOptions.js

@@ -0,0 +1,52 @@
+import * as R from 'ramda';
+import {
+  BAR,
+  CHORO,
+  H_SYMBOL,
+  ROW,
+  STACKED_BAR,
+  STACKED_ROW,
+  TIMELINE,
+  V_SYMBOL
+} from '../constants';
+
+export const getGridOptions = (type, options) => {
+  const grid = { baselines: [0], color: 'white' };
+  const hideGrid = R.assoc('thickness', 0);
+
+  return R.pipe(
+    R.propOr({}, 'grid'),
+    R.mergeDeepRight({ x: grid, y: grid }),
+    R.cond([
+      [
+        R.always(R.equals(BAR, type)),
+        R.mergeDeepRight({ x: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(ROW, type)),
+        R.mergeDeepRight({ y: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(TIMELINE, type)),
+        R.mergeDeepRight({ x: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(H_SYMBOL, type)),
+        R.mergeDeepRight({ y: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(V_SYMBOL, type)),
+        R.mergeDeepRight({ x: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(STACKED_BAR, type)),
+        R.mergeDeepRight({ x: { thickness: 0 } })
+      ],
+      [
+        R.always(R.equals(STACKED_ROW, type)),
+        R.mergeDeepRight({ y: { thickness: 0 } })
+      ],
+      [R.T, R.identity]
+    ])
+  )(options);
+};