@sis-cc/dotstatsuite-components 8.11.0 → 8.13.0

package/lib/rules-driver/src/app/viewer2.js

@@ -1,115 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _chart = require('./chart');
-
-var _chart2 = _interopRequireDefault(_chart);
-
-var _configT4size = require('./config-t4size');
-
-var _configT4size2 = _interopRequireDefault(_configT4size);
-
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _configSelect = require('./config-select');
-
-var _configSelect2 = _interopRequireDefault(_configSelect);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var activeComponent = function activeComponent(Component) {
-  return function (_ref) {
-    var isActive = _ref.isActive,
-        rest = (0, _objectWithoutProperties3.default)(_ref, ['isActive']);
-    return isActive ? _react2.default.createElement(Component, rest) : null;
-  };
-};
-
-var ConfigSelect = activeComponent(_configSelect2.default);
-
-var Viewer = function Viewer(_ref2) {
-  var chartData = _ref2.chartData,
-      chartOptions = _ref2.chartOptions,
-      onChange = _ref2.onChange,
-      properties = _ref2.properties,
-      type = _ref2.type;
-  return _react2.default.createElement(
-    'div',
-    null,
-    _react2.default.createElement(_configT4size2.default, {
-      height: (0, _ramda.path)(['height', 'value'], properties),
-      onChange: onChange,
-      width: (0, _ramda.path)(['width', 'value'], properties)
-    }),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, properties.display, {
-      label: 'Display as',
-      onChange: function onChange(selection) {
-        return properties.display.onChange(selection.value);
-      },
-      clearable: false,
-      multi: false,
-      value: R.find(R.propEq('value', properties.display.value), properties.display.options)
-    })),
-    _react2.default.createElement(_chart2.default, {
-      data: chartData,
-      options: chartOptions,
-      type: type
-    }),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('scatterDimension', properties), {
-      label: 'Scatter Dimension',
-      multi: false,
-      clearable: false
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('scatterX', properties), {
-      label: 'Scatter Value For X Axis',
-      multi: false,
-      clearable: false
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('scatterY', properties), {
-      label: 'Scatter Value For Y Axis',
-      multi: false,
-      clearable: false
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('symbolDimension', properties), {
-      label: 'Symbol Dimension',
-      multi: false,
-      clearable: false
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('stackedDimension', properties), {
-      label: 'Stacked Dimension',
-      multi: false,
-      clearable: false
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('highlight', properties), {
-      label: 'Highlight Selection',
-      multi: true,
-      clearable: true
-    })),
-    _react2.default.createElement(ConfigSelect, (0, _extends3.default)({}, R.prop('baseline', properties), {
-      label: 'Baseline Selection',
-      multi: false,
-      clearable: true
-    }))
-  );
-};
-
-exports.default = Viewer;

package/src/rules-driver/src/app/chart.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import OecdChart from '../../../chart/src';
-import { chartTypes } from '../../../rules/src';
-import { has } from 'ramda';
-import glamorous from 'glamorous';
-
-const Container = glamorous.div({
-  marginBottom: 15,
-  marginTop: 15
-});
-
-const Chart = ({ type, ...rest }) => (
-  has(type, chartTypes)
-    ? <Container><OecdChart {...rest} type={type} /></Container>
-    : <Container>Not a Chart Type</Container>
-);
-
-export default Chart;

package/src/rules-driver/src/app/config-axis.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import _ConfigInput from './config-input';
-import glamorous from 'glamorous';
-import { Classes } from '@blueprintjs/core';
-
-const Content = glamorous.div({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  justifyContent: 'space-between',
-});
-
-const Callout = glamorous.div({ marginBottom: 10 });
-
-const activeComponent = (Component) => ({ isActive, ...rest }) => isActive ? <Component {...rest} /> : null;
-
-const ConfigInput = activeComponent(_ConfigInput);
-
-const ConfigAxis = ({ label, max, min, pivot, step }) => {
-  if (!max.isActive && !min.isActive && !pivot.isActive && !step.isActive) {
-    return null;
-  }
-  return (
-    <Callout>
-      <div className={Classes.CALLOUT}>
-        <h5>{label}</h5>
-        <Content>
-          <ConfigInput
-            {...min}
-            label="Min Value"
-            isControlled={false}
-          />
-            <ConfigInput
-            {...max}
-            label="Max Value"
-            isControlled={false}
-          />
-          <ConfigInput
-            {...pivot}
-            label="Pivot Value"
-            isControlled={false}
-          />
-          <ConfigInput
-            {...step}
-            label="Step Value"
-            isControlled={false}
-          />
-        </Content>
-      </div>
-    </Callout>
-  );
-};
-
-export default ConfigAxis;

package/src/rules-driver/src/app/config-buttons.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { map } from 'ramda';
-import { Button, ButtonGroup } from '@blueprintjs/core';
-
-export const ConfigButtons = ({ label, onChange, options, value }) => (
-  <label className="pt-label pt-inline">
-    {label}
-    <ButtonGroup>
-      {
-        map(
-          option => (
-            <Button
-              active={option.value === value}
-              key={option.value}
-              onClick={() => onChange(option.value)}
-            >
-              {option.label}
-            </Button>
-          ),
-          options
-        )
-      }
-    </ButtonGroup>
-  </label>
-);
-
-export default ConfigButtons;

package/src/rules-driver/src/app/config-input.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { InputGroup } from '@blueprintjs/core';
-
-const ConfigInput = ({ isControlled, label, leftIcon, onChange, placeholder, value }) => {
-  const submit = e => onChange(e.target.value);
-
-  const commit = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      submit(e);
-    }
-  }
-  return (
-    <label className="pt-label">
-      {label}
-      {
-        isControlled
-        ? <InputGroup
-            value={value}
-            leftIconName={leftIcon}
-            onChange={submit}
-            placeholder={placeholder}
-          />
-        : <InputGroup
-            defaultValue={value}
-            leftIconName={leftIcon}
-            onKeyPress={commit}
-            placeholder={placeholder}
-          />
-      }
-    </label>
-  );
-};
-
-export default ConfigInput;

package/src/rules-driver/src/app/config-select.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import glamorous from 'glamorous';
-import { head, is } from 'ramda';
-
-const Container = glamorous.div({
-  '& .Select-menu-outer': {
-    zIndex: 5,
-  },
-});
-
-const ConfigSelect = ({ label, multi, value, ...rest }) => (
-  <Container>
-    <label className="pt-label pt-inline">
-      {label}
-      <Select
-        {...rest}
-        multi={multi}
-        value={is(Array, value) && !multi ? head(value) : value} 
-      />
-    </label>
-  </Container>
-);
-
-export default ConfigSelect;

package/src/rules-driver/src/app/config-t4size.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-import ConfigSelect from './config-select';
-
-const  t4Options = [
-  { label: 'oecd.org/T4: 3 columns (width 270 px)', value: 'T4/3' },
-  { label: 'oecd.org/T4: 4 columns (width 370 px)', value: 'T4/4' },
-  { label: 'oecd.org/T4: 6 columns (width 560 px)', value: 'T4/6' },
-  { label: 'oecd.org/T4: 8 columns (width 760 px)', value: 'T4/8' },
-  { label: 'oecd.org/T4: 9 columns (width 855 px)', value: 'T4/9' },
-  { label: 'oecd.org/T4: 12 columns (width 1140 px)', value: 'T4/12' }
-];
-  
-const t4Values = [
-  { value: 'T4/3', width: 270, height: 203 },
-  { value: 'T4/4', width: 370, height: 278 },
-  { value: 'T4/6', width: 560, height: 420 },
-  { value: 'T4/8', width: 760, height: 570 },
-  { value: 'T4/9', width: 855, height: 642 },
-  { value: 'T4/12', width: 1140, height: 855 }
-];
-
-const ConfigT4 = ({ height, onChange, width }) => {
-  const _value = R.find(val => R.propEq('width', width, val) && R.propEq('height', height, val), t4Values);
-  const value = R.isNil(_value) ? undefined : R.prop('value', _value);
-  const option = R.find(opt => R.propEq('value', value, opt), t4Options);
-
-  const onSelect = (selection) => {
-    if (R.isNil(selection)) {
-      onChange({ width: undefined, height: undefined });
-    }
-    else {
-      const selectedValue = R.find(val => R.propEq('value', selection.value, val), t4Values);
-      onChange(R.pick(['height', 'width'], selectedValue));
-    }
-  }
-
-  return (
-    <ConfigSelect
-      label="T4 Formats"
-      multi={false}
-      clearable={true}
-      value={option}
-      onChange={onSelect}
-      options={t4Options}
-    />
-  );   
-};
-
-export default ConfigT4;

package/src/rules-driver/src/app/config1.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import _ConfigSelect from './config-select';
-import _ConfigInput from './config-input';
-import _ConfigButtons from './config-buttons';
-import ConfigAxis from './config-axis';
-import { prop } from 'ramda';
-import glamorous from 'glamorous';
-
-const activeComponent = (Component) => ({ isActive, ...rest }) => isActive ? <Component {...rest} /> : null;
-
-const ConfigSelect = activeComponent(_ConfigSelect);
-const ConfigInput = activeComponent(_ConfigInput);
-const ConfigButtons = activeComponent(_ConfigButtons);
-
-const GDiv = glamorous.div({ width: '100%' });
-
-const Axes = glamorous.div({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between'
-});
-
-const Config = ({ properties }) => {
-  return (
-    <GDiv>
-      <ConfigInput
-        {...prop('title', properties)}
-        isControlled={true}
-        label="Title of the Chart"
-        placeholder="Enter a chart title"
-      />
-      <ConfigInput
-        {...prop('subtitle', properties)}
-        isControlled={true}
-        label="Subtitle of the Chart"
-        placeholder="Enter a chart subtitle"
-      />
-      <ConfigInput
-        {...prop('width', properties)}
-        isControlled={false}
-        label="Width of the Chart"
-        leftIcon="arrows-horizontal"
-        placeholder="Enter a numerical value"
-      />
-      <ConfigInput
-        {...prop('height', properties)}
-        isControlled={false}
-        label="Height of the Chart"
-        leftIcon="arrows-vertical"
-        placeholder="Enter a numerical value"
-      />
-      <ConfigSelect
-        {...prop('scatterDimension', properties)}
-        label="Scatter Dimension"
-        multi={false}
-        clearable={false}
-      />
-      <ConfigSelect
-        {...prop('scatterX', properties)}
-        label="Scatter Value For X Axis"
-        multi={false}
-        clearable={false}
-      />
-      <ConfigSelect
-        {...prop('scatterY', properties)}
-        label="Scatter Value For Y Axis"
-        multi={false}
-        clearable={false}
-      />
-      <ConfigSelect
-        {...prop('symbolDimension', properties)}
-        label="Symbol Dimension"
-        multi={false}
-        clearable={false}
-      />
-      <ConfigSelect
-        {...prop('stackedDimension', properties)}
-        label="Stacked Dimension"
-        multi={false}
-        clearable={false}
-      />
-      <ConfigSelect
-        {...prop('highlight', properties)}
-        label="Highlight Selection"
-        multi={true}
-        clearable={true}
-      />
-      <ConfigSelect
-        {...prop('baseline', properties)}
-        label="Baseline Selection"
-        multi={false}
-        clearable={true}
-      />
-      <ConfigButtons
-        {...prop('display', properties)}
-      />
-      <ConfigInput
-        {...prop('freqStep', properties)}
-        isControlled={false}
-        label="Timeline Axis Frequency Step"
-      />
-      <ConfigAxis
-        label="Axe X"
-        max={prop('maxX', properties)}
-        min={prop('minX', properties)}
-        pivot={prop('pivotX', properties)}
-        step={prop('stepX', properties)}
-      />
-      <ConfigAxis
-        label="Axe Y"
-        max={prop('maxY', properties)}
-        min={prop('minY', properties)}
-        pivot={prop('pivotY', properties)}
-        step={prop('stepY', properties)}
-      />
-    </GDiv>
-  );
-};
-
-export default Config;

package/src/rules-driver/src/app/menu.js

@@ -1,27 +0,0 @@
-import React from  'react';
-import { Button } from '@blueprintjs/core';
-import { map } from 'ramda';
-
-const Menu = ({ align, iconName, items, onChange, selected }) => {
-  return (
-    <div className={`pt-navbar-group pt-align-${align}`}>
-      {
-        map(
-          ({ label, value }) => (
-            <Button
-              className="pt-minimal"
-              iconName={iconName}
-              onClick={() => onChange(value)}
-              active={value === selected}
-              key={value}
-              text={label}
-            />
-          ),
-          items
-        )
-      }
-    </div>
-  );
-};
-
-export default Menu;

package/src/rules-driver/src/app/viewer1.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import Chart from './chart';
-import Config from './config1';
-
-const Viewer = ({ chartData, chartOptions, properties, type }) => {
-  return (
-    <div>
-      <Chart
-        data={chartData}
-        options={chartOptions}
-        type={type}
-      />
-      <Config properties={properties} />
-   </div>
-  )
-};
-
-export default Viewer;

package/src/rules-driver/src/app/viewer2.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import Chart from './chart';
-import ConfigT4 from './config-t4size';
-import { path } from 'ramda';
-import _ConfigSelect from './config-select';
-import * as R from 'ramda';
-
-const activeComponent = (Component) => ({ isActive, ...rest }) => isActive ? <Component {...rest} /> : null;
-
-const ConfigSelect = activeComponent(_ConfigSelect);
-
-const Viewer = ({ chartData, chartOptions, onChange, properties, type }) => (
-  <div>
-    <ConfigT4
-      height={path(['height', 'value'], properties)}
-      onChange={onChange}
-      width={path(['width', 'value'], properties)}
-    />
-    <ConfigSelect
-      {...properties.display}
-      label="Display as"
-      onChange={selection => properties.display.onChange(selection.value)}
-      clearable={false}
-      multi={false}
-      value={R.find(R.propEq('value', properties.display.value), properties.display.options)}
-    />
-    <Chart
-      data={chartData}
-      options={chartOptions}
-      type={type}
-    />
-    <ConfigSelect
-      {...R.prop('scatterDimension', properties)}
-      label="Scatter Dimension"
-      multi={false}
-      clearable={false}
-    />
-    <ConfigSelect
-      {...R.prop('scatterX', properties)}
-      label="Scatter Value For X Axis"
-      multi={false}
-      clearable={false}
-    />
-    <ConfigSelect
-      {...R.prop('scatterY', properties)}
-      label="Scatter Value For Y Axis"
-      multi={false}
-      clearable={false}
-    />
-    <ConfigSelect
-      {...R.prop('symbolDimension', properties)}
-      label="Symbol Dimension"
-      multi={false}
-      clearable={false}
-    />
-    <ConfigSelect
-      {...R.prop('stackedDimension', properties)}
-      label="Stacked Dimension"
-      multi={false}
-      clearable={false}
-    />
-    <ConfigSelect
-      {...R.prop('highlight', properties)}
-      label="Highlight Selection"
-      multi={true}
-      clearable={true}
-    />
-    <ConfigSelect
-      {...R.prop('baseline', properties)}
-      label="Baseline Selection"
-      multi={false}
-      clearable={true}
-    />
-  </div>
-);
-
-export default Viewer;