@sis-cc/dotstatsuite-components 22.0.1 → 22.0.2

package/src/viewer/src/app/table.js

@@ -0,0 +1,423 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Viewer from '../';
+
+const headerData = [
+  {
+    data: [
+      { dimension: { label: 'Header 1' }, value: { label: 'H1 Value 1' } },
+      { dimension: { label: 'Header 2' }, value: { label: 'H2 Value 1' } }
+    ],
+    key: 'c1',
+    flags: [{ label: 'Column Flag' }]
+  },
+  {
+    data: [
+      { dimension: { label: 'Header 1' }, value: { label: 'H1 Value 2', flags: [{ label: 'Column Value Flag' }] } },
+      { dimension: { label: 'Header 2' }, value: { label: 'H2 Value 2' } }
+    ],
+    key: 'c2',
+    flags: []
+  }
+];
+
+const sectionsData = [
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's1',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's2',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's3',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's4',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's5',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's6',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's7',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's8',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's9',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's10',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
+      key: 's11',
+      flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2' } },
+        ],
+        key: 'r2',
+        flags: []
+      },
+    ]
+  ],
+  [
+    {
+      data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
+      key: 's12',
+      flags: []
+    },
+    [
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 1' } },
+        ],
+        key: 'r1',
+        flags: []
+      },
+      {
+        data: [
+          { dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } },
+        ],
+        key: 'r2',
+        flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
+      },
+    ]
+  ],
+];
+
+const cells = {
+  c1: {
+    s1: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s2: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+    s3: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s4: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+    s5: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s6: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+    s7: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s8: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+    s9: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s10: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+    s11: {
+      r1: [{ value: 0, flags: [] }],
+      r2: [{ value: 1, flags: [] }]
+    },
+    s12: {
+      r1: [{ value: 2, flags: [] }],
+      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
+    },
+  },
+  c2: {
+    s1: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s2: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, flags: [] }]
+    },
+    s3: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s4: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, flags: [] }]
+    },
+    s5: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s6: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, flags: [] }]
+    },
+    s7: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s8: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, flags: [] }]
+    },
+    s9: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s10: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, flags: [] }]
+    },
+    s11: {
+      r1: [{ value: 4, flags: [] }],
+      r2: [{ value: 5, flags: [] }]
+    },
+    s12: {
+      r1: [{ value: 6, flags: [] }],
+      r2: [{ value: 7, 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>
+  );
+};

package/src/viewer/src/app/use-case-1.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as R from 'ramda';
+import Viewer from '../';
+import rowData from '../../mocks/row';
+//import stackData from '../../mocks/stack';
+import { series } from '../../../rules/src';
+import data from '../../../rules/test/oecd-HEALTH_PROT.json';
+
+export default ({ config, style, options }) => {
+  const type = 'StackedRowChart';
+  const stackSeries = series(data, type, null, { mode: 'percent', limit: 5 }, null, null, null);
+  return (
+    <Viewer
+      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: stackSeries }}
+      chartOptions={{
+        base: { height: 700 }
+      }}
+      type={type}
+    />
+  );
+};

package/src/viewer/src/app/use-case-2.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import * as R from 'ramda';
+import Viewer from '../';
+import rowData from '../../mocks/row';
+import barData from '../../mocks/bar';
+import scatterData from '../../mocks/scatter';
+import timeData from '../../mocks/gpp-time';
+
+export default ({ config, style, options }) => {
+  const style1 = {
+    ...style,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  };
+
+  const style2 = {
+    width: 500,
+    height: 500,
+    padding: 10,
+  };
+
+  return (
+    <div style={style1}>
+      <div style={style2}>
+        <Viewer chartOptions={options} type="RowChart" {...rowData()} />
+      </div>
+      <div style={style2}>
+        <Viewer chartOptions={options} type="BarChart" {...barData()} />
+      </div>
+      <div style={style2}>
+        <Viewer chartOptions={options} type="ScatterChart" {...scatterData()} />
+      </div>
+    </div>
+  );
+};

package/src/viewer/src/app/use-case-3.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import * as R from 'ramda';
+import Viewer from '../';
+import rowData from '../../mocks/row';
+import stackData from '../../mocks/stack';
+
+export default ({ options }) => {
+  return (
+    <div style={{ display: 'flex' }}>
+      <div>
+        <Viewer {...rowData()} chartOptions={options} type="RowChart" />
+      </div>
+      <div>
+        <Viewer {...stackData()} chartOptions={options} type="StackedBarChart" />
+      </div>
+    </div>
+  );
+};

package/src/viewer/src/app.js

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
+import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
+import UseCase1 from './app/use-case-1';
+import TableCase from './app/table';
+import TableOneCell from './app/one-table-cell';
+import UseCase2 from './app/use-case-2';
+import UseCase3 from './app/use-case-3';
+import ResNoDataCase from './app/nodata-res';
+import SizedNoDataCase from './app/nodata-sized';
+import Legacy from './app/leg';
+import Viewer from '.';
+
+const AppTab = ({ label, iconName }) => (
+  <Tooltip content={label} position={Position.RIGHT}>
+    <Icon iconName={iconName} />
+  </Tooltip>
+);
+
+export default () => {
+  const [isRtl, setRtl] = useState(false);
+
+  const theme = createTheme(sisccTheme({ rtl: isRtl ? 'rtl' : 'ltr' }));
+
+  const config = {
+    logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
+    owner: '©OECD',
+    terms: { label: 'Terms & Conditions', link: 'https://www.oecd.org/termsandconditions/' },
+  };
+
+  const style = {
+    height: 'calc(100vh - 70px)',
+  };
+
+  const options = {
+    base: { height: 500 },
+    axis: {
+      x: {
+        linear: {
+          step: 5,
+          max: 20,
+        },
+      },
+      y: {
+        linear: {
+          step: 5,
+          max: 20,
+        },
+      },
+    },
+  };
+
+
+/*
+
+<Tab2
+            id="uc3"
+            title={<AppTab label="fluid width" iconName="fullscreen" />}
+            panel={<UseCase3 isRtl={isRtl} config={config} style={style} options={options} />}
+          />
+          <Tab2
+            id="uc1"
+            title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
+            panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
+          />
+          <Tab2
+            id="table0"
+            title={<AppTab label="table" iconName="fullscreen" />}
+            panel={<TableCase isRtl={isRtl} config={config} style={style} />}
+          />
+          <Tab2
+            id="table1"
+            title={<AppTab label="table one cell" iconName="fullscreen" />}
+            panel={<TableOneCell isRtl={isRtl} config={config} style={style} />}
+          />
+          <Tab2
+            id="uc2"
+            title={<AppTab label="responsive fixed slot dashboard" iconName="grid-view" />}
+            panel={<UseCase2 isRtl={isRtl} config={config} style={style} options={options} />}
+          />
+          <Tab2
+            id="leg"
+            title={<AppTab label="legacy should still work like a charm" iconName="comparison" />}
+            panel={<Legacy isRtl={isRtl} config={config} />}
+          />
+          <Tab2
+            id="unsized-nodata"
+            title={<AppTab label="Unsized No Data Chart" iconName="fullscreen" />}
+            panel={<ResNoDataCase isRtl={isRtl} config={config} />}
+          />
+          <Tab2
+            id="sized-nodata"
+            title={<AppTab label="Sized No Data Chart" iconName="fullscreen" />}
+            panel={<SizedNoDataCase isRtl={isRtl} config={config} />}
+          />
+
+*/
+
+  return (
+    {/* <div style={{ padding: 10 }}>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+      <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
+      <Tabs2 renderActiveTabPanelOnly={false}>
+        <Tab2
+          id="uc1"
+          title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
+          panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
+        />
+      </Tabs2>
+      </ThemeProvider>
+      </StyledEngineProvider>
+    </div> */}
+  );
+};

package/src/viewer/src/chart.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as R from 'ramda';
+import { NoData } from '@sis-cc/dotstatsuite-visions';
+import * as charts from '../../bridge-d3-react/src';
+import filterSeriesRegardingDimensions from './chartUtils/series';
+import AxisLegend from './legends/AxisLegend.jsx';
+import { isChartNoData } from './utils';
+
+const Chart = ({ options, series, type, width, getAxisOptions }) => {
+  const ChartClass = charts[type];
+  return (
+    <div>
+      {
+        (R.is(Number, width) && width < 370)
+        ? null
+        : <AxisLegend axis="y" data={{ series }} type={type} />
+      }
+      <ChartClass
+        data={series}
+        options={options}
+        getAxisOptions={getAxisOptions}
+      />
+    </div>
+  );
+};
+
+const ChartWrapper = (props = {}) => {
+  const options = R.over(
+    R.lensPath(['base', 'height']),
+    R.when(h => h < 0, R.always(300))
+  )(props.options);
+
+  if (isChartNoData(props)) {
+    const height = R.path(['base', 'height'], options);
+    const style = { height };
+    return (
+      <div style={style}>
+        <NoData message={props.noData || 'No Data'} />
+      </div>
+    );
+  }
+
+  return (
+    <Chart
+      {...props}
+      options={options}
+      series={filterSeriesRegardingDimensions(props.data.series, props.type, options)} // responsive rule only display highlighted data
+    />
+  );
+};
+
+export default ChartWrapper;