@sis-cc/dotstatsuite-components 8.11.1 → 8.14.0

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

@@ -1,139 +1,144 @@
-import { find, get, groupBy, has, head, isUndefined, join, keyBy, map, reduce, split, sortBy, sumBy, take } from 'lodash';
 import { isTimePeriodDimension } from '@sis-cc/dotstatsuite-sdmxjs';
 import { dimensionValueDisplay } from '../dimension-utils';
 import { getObservationFormater } from '../observation-formater';
+import * as R from 'ramda';
 
 const flatDatapoints = (observations, dimensions, dimensionsWithValuesIndexedById, serieDimensionId, display, formaterAttrs) => {
-  return map(
-    observations,
+
+  const datapoints = R.mapObjIndexed(
     (observationValue, observationKey) => {
       let x = null;
-      const y = Number(head(observationValue));
+      const y = Number(R.head(observationValue));
       const formater = getObservationFormater(observationValue, formaterAttrs);
-      const splittedKey = split(observationKey, ':');
+      const splittedKey = R.split(':', observationKey);
       let layerKey = [];
-      const layerDimensions = reduce(
-        splittedKey,
+      const layerDimensions = R.addIndex(R.reduce)(
         (memo, dimensionValueIndex, dimensionIndex) => {
-          const dimension = get(dimensions, `[${dimensionIndex}]`);
-          if (has(dimensionsWithValuesIndexedById, dimension.id)) {
-            const dimensionValue = {
-              ...get(dimension, `values[${dimensionValueIndex}]`, {}),
-              index: dimensionValueIndex,
-              label: dimensionValueDisplay(display)(get(dimension, `values[${dimensionValueIndex}]`, {}))
-            }
-            if (dimension.id === serieDimensionId) {
-              x = dimensionValue;
-            }
-            else {
-              memo.push(dimensionValue);
-              layerKey.push(dimensionValueIndex);
-            }
+          const dimension = R.nth(dimensionIndex, dimensions);
+          const _dimensionValue = R.pathOr({}, ['values', Number(dimensionValueIndex)], dimension);
+          const label = dimensionValueDisplay(display)(_dimensionValue);
+          const dimensionValue = {
+            ..._dimensionValue,
+            index: Number(dimensionValueIndex),
+            label
+          };
+          if (dimension.id === serieDimensionId) {
+            x = dimensionValue;
+          }
+          else if (R.has(dimension.id, dimensionsWithValuesIndexedById)) {
+            memo.push(dimensionValue);
+            layerKey.push(dimensionValueIndex);
           }
           return memo;
         },
-        []
+        [],
+        splittedKey
       );
-      return ({ formater, x, y, layerDimensions, layerKey: join(layerKey, ':') });
-    }
+      return ({ formater, x, y, layerDimensions, layerKey: R.join(':', layerKey) });
+    },
+    observations
   );
+
+  return R.values(datapoints);
 };
 
 const serie = (observations, dimensions, dimensionsWithValuesIndexedById, serieDimensionId, display, formaterAttrs) => {
-  const serieDimension = find(dimensionsWithValuesIndexedById, d => d.id === serieDimensionId);
-  if (isUndefined(serieDimension)) {
-    return [];
+  const serieDimension = R.find(R.propEq('id', serieDimensionId), dimensions);
+  if (R.isNil(serieDimension)) {
+    return { datapoints: [], layerSeries: [] };
   }
   const _flatDatapoints = flatDatapoints(observations, dimensions, dimensionsWithValuesIndexedById, serieDimensionId, display, formaterAttrs);
-  const layeredDatapoints = groupBy(
-    _flatDatapoints,
-    dp => dp.layerKey
+
+  const layeredDatapoints = R.groupBy(
+    R.prop('layerKey'),
+    _flatDatapoints
   ); // { [layeredKey]: [dps] }
-  const layerFullSeries = map(
-    layeredDatapoints,
-    (datapoints, layerKey) => ({ layerDimensions: get(head(datapoints), 'layerDimensions'), layerKey })
+
+  const layerFullSeries = R.map(
+    datapoints => ({
+      layerDimensions: R.prop('layerDimensions', R.head(datapoints)),
+      layerKey: R.prop('layerKey', R.head(datapoints))
+    }),
+    R.values(layeredDatapoints)
   ); // [{ layerDimensions, layerKey }]
-  const layerSeries = take(sortBy(layerFullSeries, layer => layer.layerKey), 5);
-  const layeredDatapointsKeyedByX = reduce(
-    layeredDatapoints,
-    (memo, layerDps, key) => {
-      const dps = keyBy(layerDps, dp => get(dp, 'x.id', ''));
-      return ({
-        ...memo,
-        [`${key}`]: dps
-      });
-    },
-    {}
+  const layerSeries = R.take(5, R.sortBy(R.prop('layerKey'), layerFullSeries));
+  const layeredDatapointsKeyedByX = R.mapObjIndexed(
+    R.indexBy(R.path(['x', 'id'])),
+    layeredDatapoints
   ); // { [layeredKey]: { [x.id]: dp } }
-  const datapoints = map(
-    serieDimension.values,
+  const datapoints = R.addIndex(R.map)(
     (serieValue, index) => {
       const serieValueId = serieValue.id;
       const x = dimensionValueDisplay(display)(serieValue);
-      const y = map(
+      const y = R.map(
+        ({ layerKey }) => R.pathOr(null, [layerKey, serieValueId, 'y'], layeredDatapointsKeyedByX),
         layerSeries,
-        ({ layerKey }) => get(layeredDatapointsKeyedByX, `${layerKey}.${serieValueId}.y`, null)
       );
-      const formaters = map(
+      const formaters = R.map(
+        ({ layerKey }) => R.pathOr(null, [layerKey, serieValueId, 'formater'], layeredDatapointsKeyedByX),
         layerSeries,
-        ({ layerKey }) => get(layeredDatapointsKeyedByX, `${layerKey}.${serieValueId}.formater`, null)
       );
       return ({ category: x, formaters, index, x, y, key: serieValueId });
-    }
+    },
+    serieDimension.values,
+  );
+  const _datapoints = R.when(
+    R.pipe(R.length, R.equals(1)),
+    R.pipe(
+      R.set(R.lensPath([0, 'category']), ''),
+      R.set(R.lensPath([0, 'x']), ''),
+    ),
+    datapoints
   );
   return ({
-    datapoints,
-    layerSeries: map(
-      layerSeries,
+    datapoints: _datapoints,
+    layerSeries: R.map(
       layer => ({
-        id: join(map(layer.layerDimensions, l => l.id), ' - '),
-        label: join(map(layer.layerDimensions, l => l.label), ' - '),
-      })
+        id: R.pipe(R.prop('layerDimensions'), R.pluck('id'), R.join(' - '))(layer),
+        label: R.pipe(R.prop('layerDimensions'), R.pluck('label'), R.join(' - '))(layer),
+      }),
+      layerSeries
     )
   });
 };
 
-const percentSerie = (serie) => {
-  return [{
-    layerSeries: serie.layerSeries,
-    datapoints: map(
-      serie.datapoints,
-      dp => {
-        const total = sumBy(dp.y, val => Math.abs(val));
-        if (!total) {
-          return dp;
-        }
-        return ({
-          ...dp,
-          y: map(dp.y, value => (Math.abs(value) / total) * 100),
-          formaters: null,
-        });
+const percentSerie = R.pipe(
+  R.over(
+    R.lensProp('datapoints'),
+    R.map(dp => {
+      const total = R.pipe(R.map(v => Math.abs(v)), R.sum)(dp.y);
+      if (!total) {
+        return dp;
       }
-    )
-  }];
-};
+      return ({
+        ...dp,
+        y: R.map(v => (Math.abs(v) / total) * 100, dp.y),
+        formaters: null,
+      });
+    })
+  ),
+  R.of
+);
 
-const serieSortedByTotal = (serie) => {
-  return [{
-    layerSeries: serie.layerSeries,
-    datapoints: sortBy(
-      serie.datapoints,
-      dp => sumBy(dp.y, val => val > 0 ? (-1 * val) : 0)
-    )
-  }];
-};
+const serieSortedByTotal = R.pipe(
+  R.over(
+    R.lensProp('datapoints'),
+    R.sortBy(R.pipe(R.prop('y'), R.map(v => v > 0 ? R.negate(v) : 0), R.sum))
+  ),
+  R.of
+);
 
-const serieSortedByDataOrder = (serie) => [{ //to robustize with date generation, as in timeline series
-  layerSeries: serie.layerSeries,
-  datapoints: sortBy(
-    serie.datapoints,
-    dp => dp.index
-  )
-}];
+const serieSortedByDataOrder = R.pipe(
+  R.over(
+    R.lensProp('datapoints'),
+    R.sortBy(R.prop('index'))
+  ),
+  R.of
+);
 
 export default ({ observations, dimensions }, dimensionsWithValuesIndexedById, singularity, display, formaterAttrs) => {
-  const mode = get(singularity, 'mode', 'values');
-  const serieDimensionId = get(singularity, 'id', null);
+  const mode = R.propOr('values', 'mode', singularity);
+  const serieDimensionId = R.propOr(null, 'id', singularity);
   const _serie = serie(observations, dimensions, dimensionsWithValuesIndexedById, serieDimensionId, display, formaterAttrs);
   if (mode === 'percent') {
     return percentSerie(_serie);
@@ -141,5 +146,8 @@ export default ({ observations, dimensions }, dimensionsWithValuesIndexedById, s
   else if (isTimePeriodDimension({ id: serieDimensionId })) {
     return serieSortedByDataOrder(_serie);
   }
-  return serieSortedByTotal(_serie);
+  //console.log('raw serie', _serie);
+  const res = serieSortedByTotal(_serie);
+  //console.log('serie', res);
+  return res;
 };

package/src/rules/src/index.js

@@ -129,8 +129,7 @@ const _symbolDimension = (data, ids) => {
 export const symbolDimension = memoizee(_symbolDimension);
 
 const _stackedDimension = (data, singularity) => {
-  const { values } = splitDimensions(data);
-  return __stackedDimension(values, singularity);
+  return __stackedDimension(splitDimensions(data), singularity);
 }
 export const stackedDimension = memoizee(_stackedDimension);
 

package/src/rules/src/properties/index.js

@@ -40,6 +40,7 @@ import {
 } from './symbol';
 import {
   isStacked,
+  isStackedDimActive,
   onChangeStackedDimension,
   onChangeStackedMode,
   stackedModeOptions,
@@ -205,6 +206,7 @@ export const initialState = {
 };
 
 export const stateFromNewProps = (props, state) => {
+  if (R.isNil(props.data)) return state; // don't reset state
   const focusState = sampleFocusStateFromNewProps(props, state);
   const scatterState = scatterStateFromNewProps(props, state);
   const symbolState = symbolStateFromNewProps(props, state);
@@ -403,7 +405,7 @@ export const toProperties = (props, state, onChange) => ({
   },
   stackedDimension: {
     id: 'stackedDimension',
-    isActive: isStacked(props.type),
+    isActive: isStackedDimActive(props),
     options: chartDimensionOptions(props, isStacked),
     onChange: R.pipe(
       optionParser,

package/src/rules/src/properties/stacked.js

@@ -6,6 +6,7 @@ import {
   getPropertyDimension,
   toState
 } from './utils';
+import { splitDimensions } from '../';
 import { focusStateFromNewProps } from './focus';
 
 const getStackedDimension = getPropertyDimension('stackedDimension');
@@ -38,6 +39,15 @@ export const onChangeStackedDimension = ({ data }, state) => (value) => {
 
 export const stackedModeOptions = [{ value: VALUES }, { value: PERCENT }];
 
+export const isStackedDimActive = ({ data, type }) => {
+  const { values } = splitDimensions(data);
+  if (R.length(values) < 2) {
+    console.log('niet');
+    return false;
+  }
+  return isStacked(type);
+};
+
 export const onChangeStackedMode = (value) => R.has(value, stackedModes)
   ? ({ stackedMode: value })
   : ({});
@@ -54,15 +64,21 @@ export const stackedStateFromNewProps = (props, state) => {
 
   let dimension = getStackedDimension(data, state);
   if (R.isNil(dimension)) {
-    const { area, time, other } = getGroupedDimensions(data);
-    if (!R.isNil(area) && !R.isEmpty(area)) {
-      dimension = R.head(area);
-    }
-    else if (!R.isNil(time) && !R.isEmpty(time)) {
-      dimension = R.head(time)
+    const { value, values } = splitDimensions(data);
+    if (R.length(values) === 1) {
+      dimension = R.head(value);
     }
     else {
-      dimension = R.head(other);
+      const { area, time, other } = getGroupedDimensions(data);
+      if (!R.isNil(area) && !R.isEmpty(area)) {
+        dimension = R.head(area);
+      }
+      else if (!R.isNil(time) && !R.isEmpty(time)) {
+        dimension = R.head(time)
+      }
+      else {
+        dimension = R.head(other);
+      }
     }
   }
   const _mode = R.prop('stackedMode', state);

package/src/rules/src/properties/utils.js

@@ -1,10 +1,12 @@
 import {
-  groupBy,
+  equals,
   find,
+  groupBy,
   has,
   head,
   is,
   isNil,
+  length,
   map,
   not,
   omit,
@@ -15,7 +17,7 @@ import {
 } from 'ramda';
 import { isRefAreaDimension, isTimePeriodDimension } from '@sis-cc/dotstatsuite-sdmxjs';
 import { extractSdmxArtefacts, parseDisplay, splitDimensions } from '../';
-import { CHORO, H_SYMBOL, SCATTER, TYPES, V_SYMBOL } from '../constants';
+import { CHORO, H_SYMBOL, SCATTER, STACKED, TYPES, V_SYMBOL } from '../constants';
 import { dimensionValueDisplay } from '../dimension-utils';
 
 export const isNumber = (input) => {
@@ -44,7 +46,7 @@ export const toState = (artefact) => prop('id', artefact);
 
 export const getPropertyDimension = (property) => (data, state) => {
   const statePropertyDimensionId = prop(property, state);
-  const dimensions = getDimensionsWithValues(data);
+  const { dimensions } = extractSdmxArtefacts(data);
   return find(
     propEq('id', statePropertyDimensionId),
     dimensions
@@ -99,6 +101,9 @@ export const chartDimensionOptions = ({ data, type, display }, typeValidator) =>
     return [];
   }
   const dimensions = prop('values', splitDimensions(data));
+  if (equals(type, STACKED) && length(dimensions) === 1) {
+    return [];
+  }
   return map(
     artefactToOption(display),
     dimensions

package/src/rules-driver/src/app.js

@@ -1,139 +1,123 @@
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { Button } from '@blueprintjs/core';
-import '@blueprintjs/core/dist/blueprint.css';
-import { find, prop, propEq } from 'ramda';
+import React, { useState } from 'react';
+import * as R from 'ramda';
+import { ChartsConfig } from '@sis-cc/dotstatsuite-visions'; 
 import RulesDriver from './';
-import oecdData from './mocks/oecd.json';
-import oecdTimeData from './mocks/oecd-time.json';
-import Menu from './app/menu';
-import Viewer1 from './app/viewer1';
-import Viewer2 from './app/viewer2';
+import data1 from './mocks/data1.json';
+import data2 from './mocks/data2.json';
+import { Viewer } from '../../';
 
-export default class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.availableDatas = { oecdData, oecdTimeData };
-
-    this.sources = [
-      { label: 'oecd', value: 'oecdData', dataflowCode: 'KEI' },
-      { label: 'oecd quarter', value: 'oecdTimeData', dataflowCode: 'KEI' }
-    ];
-
-    this.chartTypes = [
-      { label: 'Bar', value: 'BarChart' },
-      { label: 'Row', value: 'RowChart' },
-      { label: 'Scatter', value: 'ScatterChart' },
-      { label: 'Timeline', value: 'TimelineChart' },
-      { label: 'H Symbol', value: 'HorizontalSymbolChart' },
-      { label: 'V Symbol', value: 'VerticalSymbolChart' },
-      { label: 'Stacked Bar', value: 'StackedBarChart' },
-      { label: 'Non Chart Type', value: 'NonChartType' }
-    ];
-
-    this.viewerOptions = [
-      { label: 'Old Classic OCC View', value: 'Viewer1' },
-      { label: 'Alternative Split', value: 'Viewer2' },
-    ];
-
-    this.viewers = {
-      Viewer1,
-      Viewer2,
-    };
-
-    this.state = {
-      data: oecdData,
-      display: 'label',
-      source: 'oecdData',
-      type: 'BarChart',
-      viewer: 'Viewer1',
-    };
-
-    this.onChangeData = this.onChangeData.bind(this);
-    this.onChangeType = this.onChangeType.bind(this);
-    this.onChangeViewer = this.onChangeViewer.bind(this);
-    this.onChangeDisplay = this.onChangeDisplay.bind(this);
-  };
-
-  onChangeData(source) { 
-    this.setState({ data: this.availableDatas[source], source });
-  };
-
-  onChangeType(type) {
-    this.setState({ type });
+const labels = {
+  focus: 'Chart Focus',
+  highlight: 'Highlights',
+  baseline: 'Baseline',
+  select: 'Select',
+  size: 'Chart Size',
+  width: 'Width',
+  height: 'Height',
+  series: 'Chart Series',
+  scatterDimension: 'Scatter Dimension',
+  scatterX: 'Scatter X',
+  scatterY: 'Scatter Y',
+  symbolDimension: 'Symbol Dimension',
+  stackedDimension: 'Stacked Dimension',
+  stackedMode: 'Stacked Mode',
+  stackedModeOptions: {
+    values: 'Values',
+    percent: 'Percent',
+  },
+  axisX: 'Chart X Axis',
+  axisY: 'Chart Y Axis',
+  max: 'Max',
+  min: 'Min',
+  pivot: 'Pivot',
+  step: 'Step',
+  frequency: 'Frequency',
+  freqStep: 'Frequency Step',
+  logo: 'Remove logo',
+  copyright: 'Remove copyright',
+  title: 'Title',
+  subtitle: 'Subtitle',
+  source: 'Source',
+  information: 'Information',
+  reset: 'reset label',
+  uniqFocusOption: 'serie',
+  display: 'Display',
+  displayOptions: {
+    name: 'Name',
+    code: 'Code',
+    both: 'Both'
   }
+};
 
-  onChangeViewer(viewer) {
-    this.setState({ viewer });
-  }
+const renameKey = R.curry((oldKey, newKey, obj) =>
+  R.assoc(newKey, R.prop(oldKey, obj), R.dissoc(oldKey, obj)),
+);
 
-  onChangeDisplay(display) {
-    this.setState({ display });
-  }
+const renameProperties = (keys = []) =>
+  R.map(
+    R.ifElse(
+      R.pipe(R.prop('id'), R.flip(R.includes)(keys)),
+      renameKey('onChange', 'onSubmit'),
+      R.identity,
+    ),
+  );
+
+const propertiesKeys = [
+  'width',
+  'height',
+  'freqStep',
+  'maxX',
+  'minX',
+  'pivotX',
+  'stepX',
+  'maxY',
+  'minY',
+  'pivotY',
+  'stepY',
+  'title',
+  'subtitle',
+  'source',
+];
   
-  render() {
-    const { data, source, type, viewer, display } = this.state;
-    const displayOptions = [
-      { label: 'label', value: 'label' },
-      { label: 'code', value: 'code' },
-      { label: 'both', value: 'both' }
-    ];
-    const displayProperties = {
-      display: {
-        isActive: true,
-        label: 'Display as',
-        onChange: this.onChangeDisplay,
-        options: displayOptions,
-        value: display,
-      }
-    };
-    const dataflowCode = prop('dataflowCode', find(propEq('value', this.state.source), this.sources));
-    const Viewer = this.viewers[viewer];
-    return (
-      <div>
-        <nav className="pt-navbar pt-dark">
-          <Menu
-            align="left"
-            items={this.viewerOptions}
-            onChange={this.onChangeViewer}
-            selected={viewer}
-          />
-          <span className="pt-navbar-divider"></span>
-          <Menu
-            align="right"
-            items={this.chartTypes}
-            onChange={this.onChangeType}
-            selected={type}
-          />
-          <span className="pt-navbar-divider"></span>
-          <Menu
-            align="right"
-            iconName="import"
-            items={this.sources}
-            onChange={this.onChangeData}
-            selected={source}
-          />
-        </nav>
-        <RulesDriver
-          data={data}
-          dataflowCode={dataflowCode}
-          display={display}
-          options={{ base: { height: 500 } }}
-          type={type}
-          render={
-            ({ chartData, chartOptions, onChange, properties }) => (
-              <Viewer
-                chartData={chartData}
-                chartOptions={chartOptions}
-                onChange={onChange}
-                properties={{ ...properties, ...displayProperties }}
-                type={type}
-              />
-            )
+const App = () => {
+  const [toggle, setToggle] = useState(true);
+  const dataflow = { id: "DF_KEI_21760", name: "Harmonised Unemployment Rate" };
+  const display = 'label';
+  const type = 'BarChart';
+  const props = { dataflow, display, type }
+
+  return (
+    <div>
+      <button onClick={() => setToggle(prev => !prev)} style={{ marginBottom: '10px' }}>Toggle Selection</button>
+      <RulesDriver
+        data={toggle ? data1 : data2}
+        {...props}
+        display={display}
+        type={type}
+        render={
+          ({ properties, ...parsedProps }) => {
+            return (
+              <div>
+                <ChartsConfig
+                  properties={R.pipe(
+                    renameProperties(propertiesKeys),
+                  )(properties)}
+                  labels={labels}
+                />
+                <Viewer
+                  {...parsedProps}
+                  chartData={R.pick(['series', 'frequency'])(parsedProps.chartData)}
+                  properties={R.tap(console.log)(R.over(R.lensProp('baseline'), R.omit(['onChange']), properties))}
+                  type='BarChart'
+                  locale='en'
+                />
+              </div>
+            );
           }
-        />
-      </div>
-    );
-  };
-};
+        }
+      />
+    </div>
+  )
+}
+
+export default App;