@sis-cc/dotstatsuite-components 23.2.0 → 24.0.0

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

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

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

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

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

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import { NoData } from '@sis-cc/dotstatsuite-visions';
-import {
-  BarChart,
-  RowChart,
-  ScatterChart,
-  TimelineChart,
-  HorizontalSymbolChart,
-  VerticalSymbolChart,
-  StackedBarChart,
-  StackedRowChart,
-  ChoroplethChart,
-} from '../../bridge-d3-react/src';
-import filterSeriesRegardingDimensions from './chartUtils/series';
-import AxisLegend from './legends/AxisLegend.jsx';
-import { isChartNoData } from './utils';
-
-const charts = {
-  BarChart,
-  RowChart,
-  ScatterChart,
-  TimelineChart,
-  HorizontalSymbolChart,
-  VerticalSymbolChart,
-  StackedBarChart,
-  StackedRowChart,
-  ChoroplethChart,
-};
-
-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;