@sis-cc/dotstatsuite-components 23.2.0 → 24.0.0

package/src/bridge-d3-react/README.md

@@ -1,42 +0,0 @@
-# bridge-d3-react
-
-Wrapper of [d3-charts](https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-d3-charts) that expose charts as React Components.
-
-## Usage
-
-```javascript
-import React from 'react';
-import { render } from 'react-dom';
-import { bridgeD3React } from '@sis-cc/dotstatsuite-components';
-
-const log = options => console.log(options);
-
-const BarChart = bridgeD3React.BarChart;
-
-render(
-  <BarChart data={ data } getInitialOptions={ log } />,
-  document.getElementById('root')
-);
-```
-
-## Available charts
-
-All charts of `d3-charts`.
-
-## API (out of the box usage)
-
-### methods
-
-#### `getInitialOptions(options)`
-
-Give options used by the chart engine to draw a chart (superset of user options).
-
-### props
-
-#### `options`
-
-Same as `d3-charts`.
-
-#### `data`
-
-Same as `d3-charts`.

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

@@ -1,15 +0,0 @@
-import { createFactory } from 'react';
-
-import factory from './react-chart-factory.jsx';
-import * as rcwCharts from '@sis-cc/dotstatsuite-d3-charts';
-
-export const BarChart = createFactory(factory(rcwCharts.BarChart));
-export const RowChart = createFactory(factory(rcwCharts.RowChart));
-export const ScatterChart = createFactory(factory(rcwCharts.ScatterChart));
-export const TimelineChart = createFactory(factory(rcwCharts.TimelineChart));
-export const VerticalSymbolChart = createFactory(factory(rcwCharts.VerticalSymbolChart));
-export const HorizontalSymbolChart = createFactory(factory(rcwCharts.HorizontalSymbolChart));
-export const StackedBarChart = createFactory(factory(rcwCharts.StackedBarChart));
-export const StackedRowChart = createFactory(factory(rcwCharts.StackedRowChart));
-export const ChoroplethChart = createFactory(factory(rcwCharts.ChoroplethChart));
-export const ChoroplethLegend = createFactory(factory(rcwCharts.ChoroplethLegend));

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

@@ -1,65 +0,0 @@
-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

@@ -1,10 +0,0 @@
-//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

@@ -1,23 +0,0 @@
-# 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

@@ -1,275 +0,0 @@
-import * as R from 'ramda';
-import numeral from 'numeral';
-import * as dateFns from 'date-fns';
-import isMonday from 'date-fns/isMonday'
-import isTuesday from 'date-fns/isTuesday'
-import isWednesday from 'date-fns/isWednesday';
-import isThursday from 'date-fns/isThursday';
-import isFriday from 'date-fns/isFriday';
-import isSaturday from 'date-fns/isSaturday';
-import isSunday from 'date-fns/isSunday';
-import getISOWeek from 'date-fns/getISOWeek'
-import { getLocale, dateWithoutTZ } from '../date';
-import {
-  BAR,
-  CHORO,
-  H_SYMBOL,
-  ROW,
-  SCATTER,
-  STACKED_BAR,
-  STACKED_ROW,
-  TIMELINE,
-  V_SYMBOL
-} from '../constants';
-export const sdmxFormat = {
-  A: 'yyyy', // Year
-  // S: semester: we append/replace 'X' with semester number
-  S: 'yyyy-',
-  Q: "yyyy-'Q'Q",
-  M: 'yyyy-MM',
-  // ISO week padded (II = 2-digit ISO week); include literal 'W'
-  W: "yyyy-'W'II",
-  B: "yyyy-'W'II",
-  D: 'yyyy-MM-dd',
-  H: "yyyy-MM-dd'T'HH:mm:ss",
-  N: "yyyy-MM-dd'T'HH:mm:ss",
-};
-const defaultTimeFormats = {
-  A: 'yyyy',
-  S: 'yyyy-',
-  Q: "yyyy-'Q'Q",
-  M: 'yyyy-MMM',
-  W: "yyyy-'W'II",
-  B: "yyyy-'W'II",
-  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'II", { locale: getLocale(locale) })
-      }
-      const seventhDay = dateFns.endOfWeek(datum, { weekStartsOn: 1 });
-      return dateFns.format(seventhDay, "yyyy-'W'II", { 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

@@ -1,84 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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';
-
-const FOCUS_COLORS = {
-  highlightColors: ['#E73741', '#0F8FD9', '#993484', '#DF521E', '#719E24', '#E1B400', '#32A674', '#0B68AF'],
-  baselineColors: ['#0B1E2D']
-};
-
-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

@@ -1,52 +0,0 @@
-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);
-};