@sis-cc/dotstatsuite-components 9.3.5 → 12.0.0

package/src/viewer/src/chart.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { branch, compose, renderComponent, withProps } from 'recompose';
 import * as R from 'ramda';
-import glamorous from 'glamorous';
+import cx from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
 import { NoData } from '@sis-cc/dotstatsuite-visions';
 import * as charts from '../../bridge-d3-react/src';
 import { SCATTER } from '../../rules/src/constants';
@@ -9,15 +10,14 @@ import filterSeriesRegardingDimensions from './chartUtils/series';
 import AxisLegend from './legends/AxisLegend';
 import { isChartNoData } from './utils';
 
-const Container = glamorous.div({
-  backgroundColor: 'none',
-  overflow: 'hidden',
-  position: 'relative',
-  direction: 'ltr !important',
-}, ({ type }) => {
-  if (!R.equals(SCATTER, type))
-    return ({});
-  return ({
+const useStyles = makeStyles(() => ({
+  container: {
+    backgroundColor: 'none',
+    overflow: 'hidden',
+    position: 'relative',
+    direction: 'ltr !important',
+  },
+  chartContainer: {
     '& .rcw-chart__chart__line--x:last-of-type': {
       visibility: 'hidden',
     },
@@ -34,13 +34,14 @@ const Container = glamorous.div({
         visibility: 'hidden',
       }
     },
-  });
-});
+  }
+}));
 
 const Chart = ({ options, series, type, width, getAxisOptions }) => {
+  const classes = useStyles();
   const ChartClass = charts[type];
   return (
-    <Container type={type}>
+    <div className={cx({ [classes.chartContainer]: !R.equals(SCATTER, type) })}>
       <ChartClass
         data={series}
         options={options}
@@ -51,7 +52,7 @@ const Chart = ({ options, series, type, width, getAxisOptions }) => {
         ? null
         : <AxisLegend axis="y" data={{ series }} type={type} />
       }
-    </Container>
+    </div>
   );
 };
 

package/src/viewer/src/index.js

@@ -1,37 +1,37 @@
 import React, { useEffect } from 'react';
 import * as R from 'ramda';
+import cx from 'classnames';
 import { compose, withState, withProps } from 'recompose';
 import sizeMe from 'react-sizeme';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
-import glamorous from 'glamorous';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme, makeStyles } from '@material-ui/core/styles';
 import getChartOptions from './chartUtils/options';
 import Header from './header';
 import Chart from './chart';
 import Footer from './footer';
 
-const Container = glamorous.div({
-  borderColor: '#007bc7',
-  borderBottomWidth: 1,
-  borderLeftWidth: 0,
-  borderTopWidth: 1,
-  borderRightWidth: 0,
-  borderStyle: 'solid',
-  '& svg text::selection': {
-    background: 'none'
-  }}, ({ type, fixedWidth, fixedHeight }) => R.ifElse(
-    R.always(type === 'table'),
-    R.always({
-      minWidth: '100%',
-      minHeight: '100%'
-    }),
-    R.always({
-      width: fixedWidth || '100%',
-      height: fixedHeight || '100%',
-      overflow: 'hidden'
-    })
-  )
-);
+const useStyles = makeStyles(theme => ({
+  container: {
+    borderColor: '#007bc7',
+    borderBottomWidth: 1,
+    borderLeftWidth: 0,
+    borderTopWidth: 1,
+    borderRightWidth: 0,
+    borderStyle: 'solid',
+    '& svg text::selection': {
+      background: 'none'
+    }
+  },
+  tableContainer: {
+    minWidth: '100%',
+    minHeight: '100%'
+  },
+  chartContainer: {
+    width: ({ fixedWidth }) => fixedWidth || '100%',
+    height: ({ fixedHeight }) => fixedHeight || '100%',
+    overflow: 'hidden'
+  }
+}));
 
 const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, ...rest }) => {
   if (loading) return <Loading message={loading} />;
@@ -60,6 +60,10 @@ const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, .
 };
 
 const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, type, ...rest }) => {
+  const classes = useStyles({ 
+    fixedWidth: rest.fixedWidth, 
+    fixedHeight: rest.fixedHeight
+  });
   useEffect(() => {
     if (R.is(Function, getResponsiveSize)) {
       getResponsiveSize({
@@ -70,7 +74,12 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
   });
 
   return (
-    <Container type={type} {...R.pick(['fixedWidth', 'fixedHeight'], rest)}>
+    <div 
+      className={cx(classes.container, {
+        [classes.tableContainer]: type === 'table',
+        [classes.chartContainer]: type !== 'table'
+      })}
+    >
       <Header
         onSize={size => setHeaderOffset(size.height)}
         {...R.propOr({}, 'headerProps', rest)}
@@ -83,7 +92,7 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
         chartOptions={R.prop('chartOptions', rest)}
         {...R.prop('footerProps', rest)}
       />
-    </Container>
+    </div>
   );
 };
 

package/test/advanced-attributes-parsing-perf.test.js

@@ -0,0 +1,16 @@
+import { expect } from 'chai';
+import {
+  getDataflowAdvancedAttributes,
+  getObservationsAdvancedAttributes,
+  getSeriesAdvancedAttributes
+} from '../src/rules2/src/getAdvancedAttributes';
+
+import obsMock from './mocks/table-prep-units--observations.json';
+import obsAdvancedAttributes from './mocks/observations-advanced-attributes.json';
+
+describe('advanced attributes parsing performance tests', () => {
+  it('1800 observations test', function() {
+    this.timeout(1500);
+    expect(getObservationsAdvancedAttributes(obsMock, ['CURRENCY', 'OBS_STATUS'])).to.deep.equal(obsAdvancedAttributes);
+  });
+});

package/test/getCells.test.js

@@ -24,7 +24,7 @@ describe('getCells tests', () => {
         }
       }
     }, 'label', customAttributes,
-    { unitsDefinitionCodes: [], unitsSeries: {}, unitsDisplay: 'cells', unitDimension: {} })).to.deep.equal({
+    { unitsDefinitionCodes: [], unitsSeries: {}, unitsDisplay: 'cells', unitDimension: {} }, [])).to.deep.equal({
       a: {
         value: '33',
         intValue: 33,
@@ -33,7 +33,8 @@ describe('getCells tests', () => {
           { label: 'Footnote 1: Footnote 1 Value 1' },
           { label: 'Footnote 3: Footnote 3 Value 3' }
         ],
-        indexedDimValIds: {}
+        indexedDimValIds: {},
+        sideProps: null
       }
     })
   });
@@ -48,10 +49,10 @@ describe('getCells tests', () => {
             FT1: { id: 'FT1', name: 'Footnote 1', value: { id: 'FT1.1', name: 'Footnote 1 Value 1' } },
             FT3: { id: 'FT3', name: 'Footnote 3', value: { id: 'FT3.3', name: 'Footnote 3 Value 3' } },
           },
-          indexedDimValIds: {}
+          indexedDimValIds: {},
         }
       }
-    }, 'both', customAttributes)).to.deep.equal({
+    }, 'both', customAttributes, {}, [])).to.deep.equal({
       a: {
         value: '33',
         intValue: 33,
@@ -60,7 +61,8 @@ describe('getCells tests', () => {
           { label: '(FT1) Footnote 1: (FT1.1) Footnote 1 Value 1' },
           { label: '(FT3) Footnote 3: (FT3.3) Footnote 3 Value 3' }
         ],
-        indexedDimValIds: {}
+        indexedDimValIds: {},
+        sideProps: null
       }
     })
   });

package/test/getDataflowAdvancedAttributes.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import { getDataflowAdvancedAttributes } from '../src/rules2/src/getAdvancedAttributes';
+
+describe('getDataflowAdvancedAttributes tests', () => {
+  it('complete test', () => {
+    const advancedAttributesIds = ['a0', 'a2', 'a4', 'a6'];
+    const attributes = {
+      a0: { id: 'a0', relationship: { none: {} }, values: [{ id: 'v0' }] },
+      a1: { id: 'a1', relationship: { none: {} }, values: [{ id: 'v0' }] },
+      a2: { id: 'a2', relationship: { dimensions: ['d0'] }, values: [{ id: 'v0' }] },
+      a3: { id: 'a3', relationship: { dimensions: ['d0'] }, values: [{ id: 'v0' }] },
+      a4: { id: 'a4', relationship: { dimensions: ['d0', 'd1'] }, values: [{ id: 'v0' }] },
+      a5: { id: 'a5', relationship: { dimensions: ['d0', 'd1'] }, values: [{ id: 'v0' }] },
+      a6: { id: 'a6', relationship: { dimensions: ['d0', 'd1', 'd2'] }, values: [{ id: 'v0' }] },
+    };
+    const dimLength = 4;
+    const dimensions = {
+      d0: { id: 'd0', __index: 1, values: [{ id: 'v0' }] },
+      d1: { id: 'd1', __index: 2, values: [{ id: 'v0' }] },
+      d2: { id: 'd2', __index: 3, values: [{ id: 'v0' }] },
+    };
+
+    const expected = {
+      ':::': { attributes: { a0: { id: 'a0', value: { id: 'v0' } } }, coordinates: {} },
+      ':0::': { attributes: { a2: { id: 'a2', value: { id: 'v0' } } }, coordinates: { d0: 'v0' } },
+      ':0:0:': { attributes: { a4: { id: 'a4', value: { id: 'v0' } } }, coordinates: { d0: 'v0', d1: 'v0' } },
+      ':0:0:0': { attributes: { a6: { id: 'a6', value: { id: 'v0' } } }, coordinates: { d0: 'v0', d1: 'v0', d2: 'v0' } },
+    }
+
+    expect(getDataflowAdvancedAttributes(attributes, dimensions, advancedAttributesIds, dimLength)).to.deep.equal(expected);
+  });
+});

package/test/getLayoutDataWithFlags.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import { getLayoutDataWithFlags } from '../src/rules/src/table/factories/getLayoutWithFlags';
 
-const customAttributes = { flags: ['a1', 'a2'] };
+const customAttributes = { flags: ['a1', 'a2'], footnotes: ['a3', 'a4'] };
 
 const layoutData = {
   headerData: [
@@ -41,7 +41,8 @@ const expected = {
         { dimension: { id: 'COL2', label: 'COL2', flags: [] }, value: { id: 'COL2V1', label: 'COL2V1', flags: [] } }
       ],
       key: '0:0',
-      flags: [{ code: 'A1VAL', label: 'A1: A1VAL' }, { label: 'A3: A3VAL' }]
+      flags: [{ code: 'A1VAL', label: 'A1: A1VAL' }, { label: 'A3: A3VAL' }],
+      sideProps: null
     },
     {
       data: [
@@ -49,7 +50,8 @@ const expected = {
         { dimension: { id: 'COL2', label: 'COL2', flags: [] }, value: { id: 'COL2V1', label: 'COL2V1', flags: [] } }
       ],
       key: '1:0',
-      flags: []
+      flags: [],
+      sideProps: null
     }
   ],
   sectionsData: [
@@ -57,7 +59,8 @@ const expected = {
       {
         data: [{ dimension: { id: 'SEC', label: 'SEC', flags: [] }, value: { id: 'SECV1', label: 'SECV1', flags: [] } }],
         key: '0',
-        flags: []
+        flags: [],
+        sideProps: null
       },
       [
         {
@@ -66,7 +69,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V1', label: 'ROW2V1', flags: [] } }
           ],
           key: '0:0',
-          flags: []
+          flags: [],
+          sideProps: null
         },
         {
           data: [
@@ -74,7 +78,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V2', label: 'ROW2V2', flags: [] } }
           ],
           key: '0:1',
-          flags: []
+          flags: [],
+          sideProps: null
         },
         {
           data: [
@@ -82,7 +87,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V3', label: 'ROW2V3', flags: [] } }
           ],
           key: '0:2',
-          flags: []
+          flags: [],
+          sideProps: null
         },
       ]
     ],
@@ -90,7 +96,8 @@ const expected = {
       {
         data: [{ dimension: { id: 'SEC', label: 'SEC', flags: [] }, value: { id: 'SECV2', label: 'SECV2', flags: [] } }],
         key: '1',
-        flags: []
+        flags: [],
+        sideProps: null
       },
       [
         {
@@ -99,7 +106,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V1', label: 'ROW2V1', flags: [] } }
           ],
           key: '0:0',
-          flags: []
+          flags: [],
+          sideProps: null
         },
         {
           data: [
@@ -107,7 +115,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V2', label: 'ROW2V2', flags: [] } }
           ],
           key: '0:1',
-          flags: [{ label: 'A4: A4VAL' }]
+          flags: [{ label: 'A4: A4VAL' }],
+          sideProps: null
         },
         {
           data: [
@@ -115,7 +124,8 @@ const expected = {
             { dimension: { id: 'ROW2', label: 'ROW2', flags: [] }, value: { id: 'ROW2V3', label: 'ROW2V3', flags: [] } }
           ],
           key: '0:2',
-          flags: []
+          flags: [],
+          sideProps: null
         },
       ]
     ]
@@ -127,6 +137,6 @@ describe('getLayoutDataWithFlags test', () => {
     expect(getLayoutDataWithFlags({}, 'label', {})({ headerData: [], sectionsData: [] })).to.deep.equal({ headerData: [], sectionsData: [] });
   });
   it('multi cases', () => {
-    expect(getLayoutDataWithFlags(attributesValues, 'code', customAttributes)(layoutData)).to.deep.equal(expected);
+    expect(getLayoutDataWithFlags(attributesValues, 'code', customAttributes, [], [])(layoutData)).to.deep.equal(expected);
   });
 });

package/test/getSeriesAdvancedAttributes.test.js

@@ -0,0 +1,30 @@
+import { expect } from 'chai';
+import { getSeriesAdvancedAttributes } from '../src/rules2/src/getAdvancedAttributes';
+
+describe('getSeriesAdvancedAttributes tests', () => {
+  it('complete case', () => {
+    const seriesAttributes = {
+      series: {
+        '0:0:x:x:x': { attributes: { a0: { id: 'a0' } } },
+        '0:1:0:x:x': { attributes: { a0: { id: 'a0' }, a1: { id: 'a1' } } },
+      },
+      dimensions: {
+        '3:0': { attributes: { a0: { id: 'a0' } } },
+        '4:1': { attributes: { a0: { id: 'a0' }, a1: { id: 'a1' } } },
+      }
+    };
+    const advancedAttributesIds = ['a1'];
+    const dimensions = [
+      { id: 'd0', values: [{ id: 'v0' }] },
+      { id: 'd1', values: [{ id: 'v0' }, { id: 'v1' }] },
+      { id: 'd2', values: [{ id: 'v0' }] },
+      { id: 'd3', values: [{ id: 'v0' }] },
+      { id: 'd4', values: [{ id: 'v0' }, { id: 'v1' }] },
+    ];
+
+    expect(getSeriesAdvancedAttributes(seriesAttributes, dimensions, advancedAttributesIds)).to.deep.equal({
+      '0:1:0::': { attributes: { a1: { id: 'a1' } }, coordinates: { d0: 'v0', d1: 'v1', d2: 'v0' } },
+      '::::1': { attributes: { a1: { id: 'a1' } }, coordinates: { d4: 'v1' } }
+    });
+  });
+});

package/test/getSidebarData.test.js

@@ -0,0 +1,116 @@
+import { expect } from 'chai';
+import { getSidebarData } from '../src/rules2/src/getSidebarData';
+
+describe('getSidebarData tests', () => {
+  it('complete case', () => {
+    const attributes = {
+      '::': [
+        { id: 'aa0', label: 'advanced attribute 0', value: 'value' },
+        { id: 'aa1', label: 'advanced attribute 1', value: 'value' },
+      ],
+      '0::': [
+        { id: 'aa2', label: 'advanced attribute 2', value: 'value' },
+        { id: 'aa3', label: 'advanced attribute 3', value: 'value' },
+      ]
+    };
+    const metadata = {
+      '0::': [
+        { id: 'ma0', label: 'metadata attribute 0', value: 'value' },
+        { id: 'ma1', label: 'metadata attribute 1', value: 'value' },
+      ],
+      '0::0': [
+        { id: 'ma2', label: 'metadata attribute 2', value: 'value' },
+        { id: 'ma3', label: 'metadata attribute 3', value: 'value' },
+      ]
+    };
+    const options = {
+      display: 'code',
+      attributesLabel: 'Advanced Attributes'
+    };
+    const dataflow = {
+      id: 'DF',
+      name: 'Dataflow'
+    };
+    const dimensions = [
+      { id: 'd0', name: 'dimension 0', values: [{ id: 'd0v0', name: 'value 0' }] },
+      { id: 'd1', name: 'dimension 1', values: [{ id: 'd1v0', name: 'value 0' }] },
+      { id: 'd2', name: 'dimension 2', values: [{ id: 'd2v0', name: 'value 0' }] },
+    ];
+
+    expect(getSidebarData(attributes, metadata, dataflow, dimensions, options)).to.deep.equal([
+      {
+        id: '0::0',
+        label: 'd0: d0v0 - d2: d2v0',
+        splitCoord: ['0', '', '0'],
+        children: [
+          {
+            id: 'ma2',
+            label: 'metadata attribute 2',
+            value: 'value'
+          },
+          {
+            id: 'ma3',
+            label: 'metadata attribute 3',
+            value: 'value'
+          }
+        ]
+      },
+      {
+        id: '0::',
+        label: 'd0: d0v0',
+        splitCoord: ['0', '', ''],
+        children: [
+          {
+            id: '0::-attr',
+            label: 'Advanced Attributes',
+            children: [
+              {
+                id: 'aa2',
+                label: 'advanced attribute 2',
+                value: 'value'
+              },
+              {
+                id: 'aa3',
+                label: 'advanced attribute 3',
+                value: 'value'
+              }
+            ]
+          },
+          {
+            id: 'ma0',
+            label: 'metadata attribute 0',
+            value: 'value'
+          },
+          {
+            id: 'ma1',
+            label: 'metadata attribute 1',
+            value: 'value'
+          }
+        ]
+      },
+      {
+        id: '::',
+        label: 'DF',
+        splitCoord: ['', '', ''],
+        children: [
+          {
+            id: '::-attr',
+            label: 'Advanced Attributes',
+            children: [
+              {
+                id: 'aa0',
+                label: 'advanced attribute 0',
+                value: 'value'
+              },
+              {
+                id: 'aa1',
+                label: 'advanced attribute 1',
+                value: 'value'
+              }
+            ]
+          }
+        ]
+      }
+    ]);
+  });
+});

package/test/getSubtitleFlags.test.js

@@ -22,7 +22,7 @@ describe('getSubtitleFlags tests', () => {
   });
   it('simple test', () => {
     expect(getSubtitleFlags({
-      customAttributes: {},
+      customAttributes: { flags: [], footnotes: ['f1', 'f2'] },
       dimensions: {
         one: {
           a: {

package/test/getTableData.test.js

@@ -14,7 +14,8 @@ const data = {
   dataflowAttributes: {},
   dataflowName: undefined,
   seriesAttributes: [],
-  seriesAttributesValues: {}
+  seriesAttributesValues: {},
+  metadataCoordinates: []
 };
 
 const data1 = {