@sis-cc/dotstatsuite-components 8.10.0 → 8.12.0

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;

package/src/rules-driver/src/mocks/data1.json

@@ -0,0 +1,332 @@
+{
+  "header": {
+      "schema": "https://raw.githubusercontent.com/sdmx-twg/sdmx-json/master/data-message/tools/schemas/1.0/sdmx-json-data-schema.json",
+      "id": "IREF000446",
+      "prepared": "2021-09-07T13:44:06Z",
+      "test": true,
+      "contentLanguages": [
+          "en"
+      ],
+      "sender": {
+          "id": "SIS-CC-stable_-_DotStat_v8",
+          "name": "unknown",
+          "names": {
+              "en": "unknown"
+          }
+      }
+  },
+  "dataSets": [
+      {
+          "action": "Information",
+          "links": [
+              {
+                  "urn": "urn:sdmx:org.sdmx.infomodel.datastructure.DataStructure=OECD:DSD_KEI(1.0)",
+                  "rel": "DataStructure"
+              }
+          ],
+          "annotations": [
+              0,
+              1,
+              2,
+              3,
+              4
+          ],
+          "observations": {
+              "0:0:0:0:0": [
+                  5.73333333333333
+              ],
+              "0:1:0:0:0": [
+                  8.5
+              ],
+              "0:2:0:0:0": [
+                  6.05642340833333
+              ]
+          }
+      }
+  ],
+  "structure": {
+      "name": "Harmonised Unemployment Rate",
+      "names": {
+          "en": "Harmonised Unemployment Rate"
+      },
+      "dimensions": {
+          "observation": [
+              {
+                  "id": "SUBJECT",
+                  "name": "Subject",
+                  "names": {
+                      "en": "Subject"
+                  },
+                  "keyPosition": 0,
+                  "roles": [
+                      "SUBJECT"
+                  ],
+                  "values": [
+                      {
+                          "id": "LRHUTTTT",
+                          "order": 75,
+                          "name": "Harmonised unemployment rate: all persons, s.a.",
+                          "names": {
+                              "en": "Harmonised unemployment rate: all persons, s.a."
+                          },
+                          "parent": "LR",
+                          "annotations": [
+                              5
+                          ],
+                          "__indexPosition": 0,
+                          "__index": 0
+                      }
+                  ],
+                  "role": "SUBJECT"
+              },
+              {
+                  "id": "LOCATION",
+                  "name": "Country",
+                  "names": {
+                      "en": "Country"
+                  },
+                  "keyPosition": 1,
+                  "roles": [
+                      "LOCATION"
+                  ],
+                  "values": [
+                      {
+                          "id": "AUS",
+                          "order": 0,
+                          "name": "Australia",
+                          "names": {
+                              "en": "Australia"
+                          },
+                          "annotations": [
+                              5
+                          ],
+                          "__indexPosition": 0,
+                          "__index": 2
+                      },
+                      {
+                          "id": "AUT",
+                          "order": 1,
+                          "name": "Austria",
+                          "names": {
+                              "en": "Austria"
+                          },
+                          "annotations": [
+                              6
+                          ],
+                          "__indexPosition": 1,
+                          "__index": 0
+                      },
+                      {
+                          "id": "BEL",
+                          "order": 2,
+                          "name": "Belgium",
+                          "names": {
+                              "en": "Belgium"
+                          },
+                          "annotations": [
+                              7
+                          ],
+                          "__indexPosition": 2,
+                          "__index": 1
+                      }
+                  ],
+                  "role": "LOCATION"
+              },
+              {
+                  "id": "MEASURE",
+                  "name": "Measure",
+                  "names": {
+                      "en": "Measure"
+                  },
+                  "keyPosition": 2,
+                  "roles": [
+                      "MEASURE"
+                  ],
+                  "values": [
+                      {
+                          "id": "ST",
+                          "order": 5,
+                          "name": "Level, ratio or index",
+                          "names": {
+                              "en": "Level, ratio or index"
+                          },
+                          "annotations": [
+                              7
+                          ],
+                          "__indexPosition": 0,
+                          "__index": 0
+                      }
+                  ],
+                  "role": "MEASURE"
+              },
+              {
+                  "id": "FREQUENCY",
+                  "name": "Frequency",
+                  "names": {
+                      "en": "Frequency"
+                  },
+                  "keyPosition": 3,
+                  "roles": [
+                      "FREQUENCY"
+                  ],
+                  "values": [
+                      {
+                          "id": "A",
+                          "order": 0,
+                          "name": "Annual",
+                          "names": {
+                              "en": "Annual"
+                          },
+                          "annotations": [
+                              8
+                          ],
+                          "__indexPosition": 0,
+                          "__index": 0
+                      }
+                  ],
+                  "role": "FREQUENCY"
+              },
+              {
+                  "id": "TIME_PERIOD",
+                  "name": "Time",
+                  "names": {
+                      "en": "Time"
+                  },
+                  "keyPosition": 4,
+                  "roles": [
+                      "TIME"
+                  ],
+                  "values": [
+                      {
+                          "start": "2015-01-01T00:00:00Z",
+                          "end": "2015-12-31T23:59:59Z",
+                          "id": "2015",
+                          "name": "2015",
+                          "names": {
+                              "en": "2015"
+                          },
+                          "__indexPosition": 0,
+                          "__index": 0
+                      }
+                  ],
+                  "role": "TIME"
+              }
+          ]
+      },
+      "attributes": {
+          "dataSet": [
+              {
+                  "id": "OBS_STATUS",
+                  "name": "Observation Status",
+                  "names": {
+                      "en": "Observation Status"
+                  },
+                  "roles": [
+                      "OBS_STATUS"
+                  ],
+                  "relationship": {
+                      "none": {}
+                  },
+                  "values": []
+              },
+              {
+                  "id": "UNIT_MEASURE",
+                  "name": "Unit of Measures",
+                  "names": {
+                      "en": "Unit of Measures"
+                  },
+                  "roles": [
+                      "UNIT_MEASURE"
+                  ],
+                  "relationship": {
+                      "none": {}
+                  },
+                  "values": []
+              },
+              {
+                  "id": "UNIT_MULT",
+                  "name": "Multiplier",
+                  "names": {
+                      "en": "Multiplier"
+                  },
+                  "roles": [
+                      "UNIT_MULT"
+                  ],
+                  "relationship": {
+                      "none": {}
+                  },
+                  "values": []
+              },
+              {
+                  "id": "BASE_PER",
+                  "name": "Base reference period",
+                  "names": {
+                      "en": "Base reference period"
+                  },
+                  "roles": [
+                      "BASE_PER"
+                  ],
+                  "relationship": {
+                      "none": {}
+                  },
+                  "values": []
+              }
+          ],
+          "series": [],
+          "observation": []
+      },
+      "annotations": [
+          {
+              "type": "NonProductionDataflow",
+              "text": "true",
+              "texts": {
+                  "en": "true"
+              }
+          },
+          {
+              "title": "FREQUENCY=A,SUBJECT=LRHUTTTT,TIME_PERIOD_START=2015",
+              "type": "DEFAULT"
+          },
+          {
+              "title": "LOCATION",
+              "type": "LAYOUT_ROW"
+          },
+          {
+              "title": "TIME_PERIOD",
+              "type": "LAYOUT_COLUMN"
+          },
+          {
+              "title": "FREQ",
+              "type": "NOT_DISPLAYED"
+          },
+          {
+              "type": "ORDER",
+              "text": "1",
+              "texts": {
+                  "en": "1"
+              }
+          },
+          {
+              "type": "ORDER",
+              "text": "2",
+              "texts": {
+                  "en": "2"
+              }
+          },
+          {
+              "type": "ORDER",
+              "text": "3",
+              "texts": {
+                  "en": "3"
+              }
+          },
+          {
+              "type": "ORDER",
+              "text": "0",
+              "texts": {
+                  "en": "0"
+              }
+          }
+      ]
+  }
+}