@sis-cc/dotstatsuite-components 22.0.1 → 22.0.3

package/src/viewer/mocks/row.js

@@ -0,0 +1,39 @@
+export default () => ({
+  chartData: {
+    series: [
+      { datapoints: [
+        {y: 'Hungary',                       x: 5.3},
+        {y: 'Sweden',                        x: 5.6},
+        {y: 'Estonia',                       x: 5.7},
+        {y: 'Finland',                       x: 5.8},
+        {y: 'Belgium',                       x: 5.9},
+        {y: 'Turkey',                        x: 6},
+        {y: 'France',                        x: 6.4},
+        {y: 'Poland',                        x: 6.6},
+        {y: 'Slovenia',                      x: 6.8},
+        {y: 'European Union (28 countries)', x: 7.5878787878787878, baselineIndex: 0},
+        {y: 'Euro area (18 countries)',      x: 8.2},
+        {y: 'Ireland',                       x: 8.0000000000000000, highlightIndex: 0},
+        {y: 'Italy',                         x: 8.9},
+        {y: 'Slovak Republic',               x: 9.9},
+        {y: 'Portugal',                      x: 10.9},
+        {y: 'South Africa',                  x: 16.8},
+        {y: 'Spain',                         x: 17.546484545454543, highlightIndex: 1},
+        {y: 'Greece',                        x: 19.1, highlightIndex: 2}
+        ]
+      }
+    ]
+  },
+  headerProps: {
+    title: { label: 'Science performance (PISA)' },
+    subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries, and to make it longer' }],
+  },
+  footerProps: {
+    logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
+    copyright: { label: '© OECD', content: "Copyright: terms" },
+    source: {
+      label: "Labour force by educational attainment",
+      link: "data.oecd.org",
+    },
+  },
+});

package/src/viewer/mocks/scatter.js

@@ -0,0 +1,93 @@
+export default () => ({
+  // dealing with collections is more generic and compliant with D3
+  // but scatter will only deal with the first serie
+  chartData: {
+    series: [
+      {
+        // dimension values could come from different dimensions
+        dimensionValues: {
+          x: { id: 'PRINTO01', name: 'Industrial production, s.a.' },
+          y: { id: 'GP', name: 'Growth previous period' },
+        },
+        datapoints: [
+          { // scatter scales are linear, expected type for x and y is Number
+            x: 1, y: 2,
+            // relevant dimension values that are used for x and y
+            // used for annotation and tooltip
+            dimensionValues: {
+              LOCATION: { id: 'AUS', name: 'Australia' }
+            },
+            // expected value is an index (Number)
+            // baseline overrides highlight is index is equal
+            baselineIndex: 0
+          },
+          { // normal and a lot of decimals (should be rounded at 2)
+            x: 3.84651916954654, y: 6,
+            dimensionValues: {
+              LOCATION: { id: 'BEL', name: 'Belgium' }
+            },
+          },
+          { // multiple dimension values
+            x: 2, y: 2,
+            dimensionValues: {
+              LOCATION: { id: 'CAN', name: 'Canada' }
+            },
+            highlightIndex: 0
+          },
+          { // highlighted and 1 decimal, should stay as is
+            x: 1, y: 5.2,
+            dimensionValues: {
+              LOCATION: { id: 'FRA', name: 'France' }
+            },
+            highlightIndex: 1
+          },
+          { // yAxis Label conflict
+            x: 0.25, y: 6,
+            dimensionValues: {
+              LOCATION: { id: 'FIN', name: 'Finland' }
+            },
+            highlightIndex: 2
+          },
+          { // right edge
+            x: 6, y: 3,
+            dimensionValues: {
+              LOCATION: { id: 'POL', name: 'Poland' }
+            },
+          },
+          { // negative plot to show pivot lines
+            x: -3.8, y: -3.2,
+            dimensionValues: {
+              LOCATION: { id: 'ITA', name: 'Italy' }
+            },
+            highlightIndex: 3,
+          }
+        ]
+      }
+    ],
+    share: {
+      focused: {
+        baseline: [
+          { label: 'Country - Australia', category: 'Country - Australia' }
+        ],
+        highlight: [
+          { label: 'Country - Canada', category: 'Country - Canada' },
+          { label: 'Country - France', category: 'Country - France' },
+          { label: 'Country - Finland', category: 'Country - Finland' },
+          { label: 'Country - Italy', category: 'Country - Italy' }
+        ],
+      }
+    }
+  },
+  headerProps: {
+    title: { label: 'Science performance (PISA)' },
+    subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries, and to make it longer' }],
+  },
+  footerProps: {
+    logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
+    copyright: { label: '© OECD', content: "Copyright: terms" },
+    source: {
+      label: "Labour force by educational attainment",
+      link: "data.oecd.org",
+    },
+  },
+});

package/src/viewer/mocks/stack.js

@@ -0,0 +1,161 @@
+export default () => ({
+  headerProps: {
+    title: { label: 'Science performance (PISA)' },
+    subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries, and to make it longer' }],
+  },
+  footerProps: {
+    logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
+    copyright: { label: '© OECD', content: "Copyright: terms" },
+    source: {
+      label: "Labour force by educational attainment",
+      link: "data.oecd.org",
+    },
+  },
+  chartData: {
+    series: [
+      {
+        "layerSeries": [
+          {
+            "id": "PRINTO01",
+            "label": "Industrial production, s.a."
+          },
+          {
+            "id": "PRMNTO01",
+            "label": "Total manufacturing, s.a."
+          }
+        ],
+        "datapoints": [
+          {
+            "category": "Czech Republic",
+            "formaters": [
+              null,
+              null
+            ],
+            "formatedValues": [
+              "4.623184",
+              "6.0190227"
+            ],
+            "index": 4,
+            "x": "Czech Republic",
+            "y": [
+              4.62318401937048,
+              6.01902272562258
+            ],
+            "key": "CZE"
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "Austria",
+            "formatedValues": [
+              "2.1199507",
+              "2.3654597"
+            ],
+            "index": 1,
+            "x": "Austria",
+            "y": [
+              2.11995066296641,
+              2.36545969532268
+            ],
+            "key": "AUT"
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "France",
+            "formatedValues": [
+              "1.9636044",
+              "1.9280648"
+            ],
+            "index": 7,
+            "x": "France",
+            "y": [
+              1.96360436882936,
+              1.92806480043649
+            ],
+            "key": "FRA",
+            highlightIndex: 1,
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "Chile",
+            "formatedValues": [
+              "0.230173",
+              "0.2863486"
+            ],
+            "index": 8,
+            "x": "Chile",
+            "y": [
+              2.230172987500003,
+              4.286348587500551
+            ],
+            "key": "CHL",
+            highlightIndex: 0,
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "Belgium",
+            "formatedValues": [
+              "-0.0160655",
+              "0.1776473"
+            ],
+            "index": 2,
+            "x": "Belgium",
+            "y": [
+              -7.0160655474335108,
+              9.177647331428157
+            ],
+            "key": "BEL",
+            baselineIndex: 0,
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "Finland",
+            "formatedValues": [
+              "-0.9588318",
+              "-0.9386407"
+            ],
+            "index": 6,
+            "x": "Finland",
+            "y": [
+              -0.958831808585503,
+              -0.938640709195226
+            ],
+            "key": "FIN"
+          },
+          {
+            "formaters": [
+              null,
+              null
+            ],
+            "category": "China",
+            "formatedValues": [
+              "-0.0160655",
+              "0.1776473"
+            ],
+            "index": 2,
+            "x": "China",
+            "y": [
+              -7.0160655474335108,
+              9.177647331428157
+            ],
+            "key": "CHN",
+          },
+        ],
+      },
+    ],
+  }
+});

package/src/viewer/src/app/leg.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { map } from 'lodash';
+import * as R from 'ramda';
+import Viewer from '../';
+import gppSymbolData from '../../mocks/gpp-symbol';
+
+const injectConfig = config => R.over(R.lensProp('footerProps'), R.mergeRight(config));
+
+export default ({ config }) => (
+  <div className="app legacy">
+    <div className="app-chart">
+      <span className="app-note">Ordinal MinSize Vertical (Bar + VerticalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 550, height: 430 } }} type="VerticalSymbolChart" />
+    </div>
+    <div className="app-chart">
+      <span className="app-note">Ordinal MinSize Vertical (Bar + VerticalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 540, height: 430 } }} type="VerticalSymbolChart" />
+    </div>
+    <div className="app-chart">
+      <span className="app-note">Ordinal MinSize Horizontal (Row + HorizontalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 400, height: 680 } }} type="HorizontalSymbolChart" />
+    </div>
+    <div className="app-chart">
+      <span className="app-note">Ordinal MinSize Horizontal (Row + HorizontalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 280, height: 680 } }} type="HorizontalSymbolChart" />
+    </div>
+    <div className="app-chart">
+      <span className="app-note">Data Visibility Vertical (VerticalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 550, height: 430 } }} type="VerticalSymbolChart" />
+    </div>
+    <div className="app-chart">
+      <span className="app-note">Data Visibility Vertical (VerticalSymbol)</span>
+      <Viewer {...injectConfig(config)(gppSymbolData())} chartOptions={{ base: { width: 100, height: 430 } }} type="VerticalSymbolChart" />
+    </div>
+  </div>
+);

package/src/viewer/src/app/nodata-res.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Viewer from '../';
+
+export default ({ config, style, options }) => {
+  const footerProps = config;
+  const headerProps = {
+    title: { label: 'Science performance (PISA)' },
+    subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries' }],
+  };
+  return (
+    <div>
+      <Viewer
+        chartData={{ series: null, frequency: null }}
+        headerProps={headerProps}
+        footerProps={footerProps}
+        type="BarChart"
+        noData="Unsized No Data Chart"
+      />
+    </div>
+  );
+};

package/src/viewer/src/app/nodata-sized.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Viewer from '../';
+
+export default ({ config, style, options }) => {
+  const footerProps = config;
+  const headerProps = {
+    title: { label: 'Science performance (PISA)' },
+    subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries' }],
+  };
+  return (
+    <div style={style}>
+      <Viewer
+        chartData={{ series: null, frequency: null }}
+        chartOptions={{ base: { width: 500, height: 400 } }}
+        headerProps={headerProps}
+        footerProps={footerProps}
+        type="BarChart"
+        noData="Sized No Data Chart"
+      />
+    </div>
+  );
+};

package/src/viewer/src/app/one-table-cell.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Viewer from '../';
+
+const cells = {
+  "": {
+    "": {
+      "": [
+        {
+          "flags": [
+            {
+              "code": "A",
+              "label": "[OBS_STATUS]: [A]"
+            },
+            {
+              "code": "F",
+              "label": "[CONF_STATUS]: [F]"
+            }
+          ],
+          "intValue": 2,
+          "value": "2"
+        }
+      ]
+    }
+  }
+}
+
+const headerData = [
+  {
+    "data": [],
+    "key": "",
+    "flags": []
+  }
+];
+
+const sectionsData = [
+  [
+    {
+      "data": [],
+      "key": "",
+      "flags": []
+    },
+    [
+      {
+        "data": [],
+        "key": "",
+        "flags": []
+      }
+    ]
+  ]
+]
+
+export default ({ config, style, options, isRtl }) => {
+  const footerProps = config;
+  const headerProps = {
+    title: { label: 'Table Data' },
+  };
+  const tableProps = { headerData, sectionsData, cells }
+  return (
+    <div style={style}>
+        <Viewer
+          tableProps={tableProps}
+          headerProps={headerProps}
+          footerProps={footerProps}
+          type="table"
+          isRtl={isRtl}
+        />
+    </div>
+  );
+};