@deephaven/iris-grid 0.43.0 → 0.44.0

package/dist/sidebar/ChartBuilder.js

@@ -0,0 +1,443 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, RadioGroup, RadioItem } from '@deephaven/components';
+import { vsLink, dhUnlink, dhTable, dhNewCircleLargeFilled, vsCircleLargeFilled, vsTrash } from '@deephaven/icons';
+import Log from '@deephaven/log';
+import shortid from 'shortid';
+import { BarIcon, HistogramIcon, LineIcon, PieIcon, ScatterIcon } from "./icons/index.js";
+import "./ChartBuilder.css";
+var log = Log.module('ChartBuilder');
+/**
+ * Form for configuring all the settings when creating a console.
+ */
+class ChartBuilder extends PureComponent {
+  static getMaxSeriesCount(dh, type) {
+    switch (type) {
+      case dh.plot.SeriesPlotStyle.PIE:
+        return 1;
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return 0;
+      default:
+        return 100;
+    }
+  }
+  static makeSeriesItem(value) {
+    return {
+      id: shortid.generate(),
+      value
+    };
+  }
+  static makeDefaultSeriesItems(dh, type, columns) {
+    var maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);
+    if (maxSeriesCount === 0 || columns == null || columns.length === 0) {
+      return [];
+    }
+    var value = columns.length > 1 ? columns[1].name : columns[0].name;
+    return [ChartBuilder.makeSeriesItem(value)];
+  }
+  static getDefaultXAxis(type, columns) {
+    if (columns != null && columns.length > 0) {
+      return columns[0].name;
+    }
+    return null;
+  }
+  constructor(props) {
+    super(props);
+    this.handleAddSeries = this.handleAddSeries.bind(this);
+    this.handleLinkStateChange = this.handleLinkStateChange.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+    this.handleSeriesChange = this.handleSeriesChange.bind(this);
+    this.handleSeriesDeleteClick = this.handleSeriesDeleteClick.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleTypeClick = this.handleTypeClick.bind(this);
+    this.handleXAxisChange = this.handleXAxisChange.bind(this);
+    this.sendChange = this.sendChange.bind(this);
+    var {
+      model
+    } = props;
+    var {
+      columns,
+      dh
+    } = model;
+    var type = this.getTypes()[0];
+    var xAxis = ChartBuilder.getDefaultXAxis(type, columns);
+    var seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);
+    this.state = {
+      /** The selected chart type */
+      type,
+      /** Array of column names of the series to display */
+      seriesItems,
+      /** The column name to use as the x-axis */
+      xAxis,
+      /** Whether the newly created chart should be linked with the table (update when filters update) */
+      isLinked: true
+    };
+  }
+  getTypes() {
+    var {
+      model
+    } = this.props;
+    var {
+      dh
+    } = model;
+    return [dh.plot.SeriesPlotStyle.LINE, dh.plot.SeriesPlotStyle.BAR, dh.plot.SeriesPlotStyle.SCATTER, dh.plot.SeriesPlotStyle.PIE
+    // IDS-6808: Disable Histogram in Chart Builder until we pipe histogram creation through the API
+    // dh.plot.SeriesPlotStyle.HISTOGRAM,
+    ];
+  }
+
+  /**
+   * Converts the provided chart type into a readable type.
+   * Just replaces underscores with spaces and capitals the first letter of each word.
+   */
+  getTypeName(type) {
+    var {
+      model
+    } = this.props;
+    var {
+      dh
+    } = model;
+    switch (type) {
+      case dh.plot.SeriesPlotStyle.LINE:
+        return 'Line';
+      case dh.plot.SeriesPlotStyle.BAR:
+        return 'Bar';
+      case dh.plot.SeriesPlotStyle.SCATTER:
+        return 'Scatter';
+      case dh.plot.SeriesPlotStyle.PIE:
+        return 'Pie';
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return 'Histogram';
+      default:
+        return type;
+    }
+  }
+  getTypeIcon(type) {
+    var {
+      model
+    } = this.props;
+    var {
+      dh
+    } = model;
+    switch (type) {
+      case dh.plot.SeriesPlotStyle.LINE:
+        return /*#__PURE__*/React.createElement(LineIcon, null);
+      case dh.plot.SeriesPlotStyle.BAR:
+        return /*#__PURE__*/React.createElement(BarIcon, null);
+      case dh.plot.SeriesPlotStyle.SCATTER:
+        return /*#__PURE__*/React.createElement(ScatterIcon, null);
+      case dh.plot.SeriesPlotStyle.PIE:
+        return /*#__PURE__*/React.createElement(PieIcon, null);
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return /*#__PURE__*/React.createElement(HistogramIcon, null);
+      default:
+        return null;
+    }
+  }
+  getXAxisLabel(type) {
+    var {
+      model
+    } = this.props;
+    var {
+      dh
+    } = model;
+    switch (type) {
+      case dh.plot.SeriesPlotStyle.PIE:
+        return 'Labels';
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return 'Data';
+      default:
+        return 'X-Axis';
+    }
+  }
+  getSeriesLabel(type) {
+    var {
+      model
+    } = this.props;
+    var {
+      dh
+    } = model;
+    switch (type) {
+      case dh.plot.SeriesPlotStyle.PIE:
+        return 'Values';
+      default:
+        return 'Series';
+    }
+  }
+  handleAddSeries() {
+    this.setState(state => {
+      var {
+        seriesItems
+      } = state;
+      var newSeriesItems = [...seriesItems];
+      var {
+        model
+      } = this.props;
+      var {
+        columns
+      } = model;
+      newSeriesItems.push({
+        id: shortid.generate(),
+        value: columns[0].name
+      });
+      return {
+        seriesItems: newSeriesItems
+      };
+    }, this.sendChange);
+  }
+  handleLinkStateChange(event) {
+    this.setState({
+      isLinked: event.target.value === 'true'
+    }, this.sendChange);
+  }
+  handleReset() {
+    var {
+      model
+    } = this.props;
+    var {
+      columns,
+      dh
+    } = model;
+    var type = this.getTypes()[0];
+    var xAxis = ChartBuilder.getDefaultXAxis(type, columns);
+    var seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);
+    var isLinked = true;
+    this.setState({
+      type,
+      seriesItems,
+      xAxis,
+      isLinked
+    }, this.sendChange);
+  }
+  handleSeriesChange(event) {
+    var {
+      value
+    } = event.target;
+    var index = event.target.getAttribute('data-index');
+    var intIndex = parseInt(index, 10);
+    this.setState(state => {
+      var {
+        seriesItems
+      } = state;
+      seriesItems = [...seriesItems];
+      seriesItems[intIndex].value = value;
+      return {
+        seriesItems
+      };
+    }, this.sendChange);
+  }
+  handleSeriesDeleteClick(event) {
+    var changeEvent = event;
+    var index = changeEvent.target.getAttribute('data-index');
+    var intIndex = parseInt(index, 10);
+    this.setState(state => {
+      var {
+        seriesItems
+      } = state;
+      var newSeriesItems = [...seriesItems];
+      newSeriesItems.splice(intIndex, 1);
+      return {
+        seriesItems: newSeriesItems
+      };
+    }, this.sendChange);
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    var {
+      onSubmit
+    } = this.props;
+    var {
+      type,
+      seriesItems,
+      xAxis,
+      isLinked
+    } = this.state;
+    var series = seriesItems.map(item => item.value);
+    onSubmit({
+      type,
+      series,
+      xAxis,
+      isLinked
+    });
+  }
+  handleTypeClick(event) {
+    var changeEvent = event;
+    var index = changeEvent.target.getAttribute('data-index');
+    var intIndex = parseInt(index, 10);
+    var type = this.getTypes()[intIndex];
+    log.debug2('handleTypeSelect', type);
+    this.setState(state => {
+      var {
+        model
+      } = this.props;
+      var {
+        dh
+      } = model;
+      var maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);
+      var {
+        seriesItems
+      } = state;
+      seriesItems = seriesItems.slice(0, maxSeriesCount);
+      if (seriesItems.length === 0 && maxSeriesCount > 0) {
+        var {
+          columns
+        } = model;
+        seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);
+      }
+      return {
+        type,
+        seriesItems
+      };
+    }, this.sendChange);
+  }
+  handleXAxisChange(event) {
+    var xAxis = event.target.value;
+    log.debug2('x-axis change', xAxis);
+    this.setState({
+      xAxis
+    }, this.sendChange);
+  }
+  sendChange() {
+    var {
+      onChange
+    } = this.props;
+    var {
+      isLinked,
+      type,
+      seriesItems,
+      xAxis
+    } = this.state;
+    var series = seriesItems.map(item => item.value);
+    onChange({
+      type,
+      series,
+      xAxis,
+      isLinked
+    });
+  }
+  render() {
+    var {
+      model
+    } = this.props;
+    var {
+      columns,
+      dh
+    } = model;
+    var {
+      seriesItems,
+      type,
+      xAxis,
+      isLinked
+    } = this.state;
+    var maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);
+    var xAxisLabel = this.getXAxisLabel(type);
+    var seriesLabel = this.getSeriesLabel(type);
+    var isSeriesVisible = seriesItems.length > 0;
+    var isAddSeriesVisible = seriesItems.length < maxSeriesCount;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "chart-builder"
+    }, /*#__PURE__*/React.createElement("form", {
+      onSubmit: this.handleSubmit
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-row"
+    }, /*#__PURE__*/React.createElement("label", null, "Select Chart Type"), /*#__PURE__*/React.createElement("div", {
+      className: "form-row"
+    }, this.getTypes().map((chartType, index) => {
+      var key = chartType;
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: "col col-chart-type"
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: classNames('btn', 'btn-icon', 'btn-chart-type', {
+          active: chartType === type
+        }),
+        "data-index": index,
+        onClick: this.handleTypeClick
+      }, this.getTypeIcon(chartType), this.getTypeName(chartType)));
+    }))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+      className: "form-row form-inline"
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "col-2 label-left"
+    }, xAxisLabel), /*#__PURE__*/React.createElement("select", {
+      className: "form-control custom-select select-x-axis col",
+      value: xAxis,
+      onChange: this.handleXAxisChange
+    }, columns.map(column => /*#__PURE__*/React.createElement("option", {
+      key: column.name,
+      value: column.name
+    }, column.name)))), isSeriesVisible && /*#__PURE__*/React.createElement("hr", null), seriesItems.map((seriesItem, i) => /*#__PURE__*/React.createElement("div", {
+      className: "form-row form-inline form-series-item",
+      key: seriesItem.id,
+      "data-testid": "form-series-item-".concat(i)
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "col-2 label-left"
+    }, i === 0 ? seriesLabel : ''), /*#__PURE__*/React.createElement("select", {
+      className: "form-control custom-select select-series col",
+      value: seriesItem.value,
+      onChange: this.handleSeriesChange,
+      "data-testid": "select-series-item-".concat(i),
+      "data-index": i
+    }, columns.map(column => /*#__PURE__*/React.createElement("option", {
+      key: column.name,
+      value: column.name,
+      "data-index": i
+    }, column.name))), seriesItems.length > 1 && /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn-delete-series ml-2 px-2",
+      "data-index": i,
+      "data-testid": "delete-series-".concat(i),
+      onClick: this.handleSeriesDeleteClick,
+      icon: vsTrash,
+      tooltip: "Delete"
+    }))), isAddSeriesVisible && /*#__PURE__*/React.createElement("div", {
+      className: "form-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "col-2"
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn-add-series mt-1",
+      onClick: this.handleAddSeries,
+      icon: dhNewCircleLargeFilled
+    }, "Add Series")), /*#__PURE__*/React.createElement("div", {
+      className: "form-row chart-builder-link"
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "col-2 label-right"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "fa-md fa-layers"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      mask: dhTable,
+      icon: vsCircleLargeFilled,
+      transform: "right-5 down-5"
+    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: isLinked ? vsLink : dhUnlink,
+      transform: "grow-2 right-8 down-6"
+    }))), /*#__PURE__*/React.createElement(RadioGroup, {
+      onChange: this.handleLinkStateChange,
+      value: "".concat(isLinked)
+    }, /*#__PURE__*/React.createElement(RadioItem, {
+      value: "true"
+    }, "Sync State"), /*#__PURE__*/React.createElement(RadioItem, {
+      value: "false"
+    }, "Freeze State"))), /*#__PURE__*/React.createElement("div", {
+      className: "form-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "col-2 label-right"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "col chart-builder-link-info"
+    }, isLinked ? 'Charts with synced state will update to match any filters or user modifications applied to the parent table.' : 'Freeze State disconnects the chart state from the parent table. New filters or user modifications on the parent table will not be applied.')), /*#__PURE__*/React.createElement("div", {
+      className: classNames('form-row', 'justify-content-end', 'my-3')
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "secondary",
+      className: "btn-reset",
+      onClick: this.handleReset
+    }, "Reset"), /*#__PURE__*/React.createElement(Button, {
+      kind: "primary",
+      type: "submit",
+      className: "btn-submit"
+    }, "Create"))));
+  }
+}
+export default ChartBuilder;
+//# sourceMappingURL=ChartBuilder.js.map

package/dist/sidebar/ChartBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBuilder.js","names":["React","PureComponent","classNames","FontAwesomeIcon","Button","RadioGroup","RadioItem","vsLink","dhUnlink","dhTable","dhNewCircleLargeFilled","vsCircleLargeFilled","vsTrash","Log","shortid","BarIcon","HistogramIcon","LineIcon","PieIcon","ScatterIcon","log","module","ChartBuilder","getMaxSeriesCount","dh","type","plot","SeriesPlotStyle","PIE","HISTOGRAM","makeSeriesItem","value","id","generate","makeDefaultSeriesItems","columns","maxSeriesCount","length","name","getDefaultXAxis","constructor","props","handleAddSeries","bind","handleLinkStateChange","handleReset","handleSeriesChange","handleSeriesDeleteClick","handleSubmit","handleTypeClick","handleXAxisChange","sendChange","model","getTypes","xAxis","seriesItems","state","isLinked","LINE","BAR","SCATTER","getTypeName","getTypeIcon","getXAxisLabel","getSeriesLabel","setState","newSeriesItems","push","event","target","index","getAttribute","intIndex","parseInt","changeEvent","splice","preventDefault","onSubmit","series","map","item","debug2","slice","onChange","render","xAxisLabel","seriesLabel","isSeriesVisible","isAddSeriesVisible","chartType","key","active","column","seriesItem","i"],"sources":["../../src/sidebar/ChartBuilder.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, RadioGroup, RadioItem } from '@deephaven/components';\nimport {\n  vsLink,\n  dhUnlink,\n  dhTable,\n  dhNewCircleLargeFilled,\n  vsCircleLargeFilled,\n  vsTrash,\n} from '@deephaven/icons';\nimport type {\n  Column,\n  dh as DhType,\n  SeriesPlotStyle,\n} from '@deephaven/jsapi-types';\nimport Log from '@deephaven/log';\nimport shortid from 'shortid';\nimport {\n  BarIcon,\n  HistogramIcon,\n  LineIcon,\n  PieIcon,\n  ScatterIcon,\n} from './icons';\nimport './ChartBuilder.scss';\nimport IrisGridModel from '../IrisGridModel';\n\nconst log = Log.module('ChartBuilder');\n\nexport type ChartBuilderSettings = {\n  type: SeriesPlotStyle;\n  series: string[];\n  xAxis: string;\n  isLinked: boolean;\n};\nexport type SeriesItem = {\n  id: string;\n  value: string;\n};\n\ninterface ChartBuilderProps {\n  model: IrisGridModel;\n  onSubmit: (obj: ChartBuilderSettings) => void;\n  onChange: (obj: ChartBuilderSettings) => void;\n}\ninterface ChartBuilderState {\n  /** The selected chart type */\n  type: SeriesPlotStyle;\n\n  /** Array of column names of the series to display */\n  seriesItems: readonly SeriesItem[];\n\n  /** The column name to use as the x-axis */\n  xAxis: string;\n\n  /** Whether the newly created chart should be linked with the table (update when filters update) */\n  isLinked: boolean;\n}\n/**\n * Form for configuring all the settings when creating a console.\n */\nclass ChartBuilder extends PureComponent<ChartBuilderProps, ChartBuilderState> {\n  static getMaxSeriesCount(dh: DhType, type: SeriesPlotStyle): number {\n    switch (type) {\n      case dh.plot.SeriesPlotStyle.PIE:\n        return 1;\n      case dh.plot.SeriesPlotStyle.HISTOGRAM:\n        return 0;\n      default:\n        return 100;\n    }\n  }\n\n  static makeSeriesItem(value: string): SeriesItem {\n    return { id: shortid.generate(), value };\n  }\n\n  static makeDefaultSeriesItems(\n    dh: DhType,\n    type: SeriesPlotStyle,\n    columns: readonly Column[]\n  ): SeriesItem[] {\n    const maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);\n    if (maxSeriesCount === 0 || columns == null || columns.length === 0) {\n      return [];\n    }\n\n    const value = columns.length > 1 ? columns[1].name : columns[0].name;\n    return [ChartBuilder.makeSeriesItem(value)];\n  }\n\n  static getDefaultXAxis(\n    type: SeriesPlotStyle,\n    columns: readonly Column[]\n  ): string | null {\n    if (columns != null && columns.length > 0) {\n      return columns[0].name;\n    }\n\n    return null;\n  }\n\n  constructor(props: ChartBuilderProps) {\n    super(props);\n\n    this.handleAddSeries = this.handleAddSeries.bind(this);\n    this.handleLinkStateChange = this.handleLinkStateChange.bind(this);\n    this.handleReset = this.handleReset.bind(this);\n    this.handleSeriesChange = this.handleSeriesChange.bind(this);\n    this.handleSeriesDeleteClick = this.handleSeriesDeleteClick.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n    this.handleTypeClick = this.handleTypeClick.bind(this);\n    this.handleXAxisChange = this.handleXAxisChange.bind(this);\n    this.sendChange = this.sendChange.bind(this);\n\n    const { model } = props;\n    const { columns, dh } = model;\n\n    const type = this.getTypes()[0];\n    const xAxis = ChartBuilder.getDefaultXAxis(type, columns) as string;\n    const seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);\n\n    this.state = {\n      /** The selected chart type */\n      type,\n\n      /** Array of column names of the series to display */\n      seriesItems,\n\n      /** The column name to use as the x-axis */\n      xAxis,\n\n      /** Whether the newly created chart should be linked with the table (update when filters update) */\n      isLinked: true,\n    };\n  }\n\n  getTypes() {\n    const { model } = this.props;\n    const { dh } = model;\n    return [\n      dh.plot.SeriesPlotStyle.LINE,\n      dh.plot.SeriesPlotStyle.BAR,\n      dh.plot.SeriesPlotStyle.SCATTER,\n      dh.plot.SeriesPlotStyle.PIE,\n      // IDS-6808: Disable Histogram in Chart Builder until we pipe histogram creation through the API\n      // dh.plot.SeriesPlotStyle.HISTOGRAM,\n    ];\n  }\n\n  /**\n   * Converts the provided chart type into a readable type.\n   * Just replaces underscores with spaces and capitals the first letter of each word.\n   */\n  getTypeName(type: SeriesPlotStyle): string | SeriesPlotStyle {\n    const { model } = this.props;\n    const { dh } = model;\n    switch (type) {\n      case dh.plot.SeriesPlotStyle.LINE:\n        return 'Line';\n      case dh.plot.SeriesPlotStyle.BAR:\n        return 'Bar';\n      case dh.plot.SeriesPlotStyle.SCATTER:\n        return 'Scatter';\n      case dh.plot.SeriesPlotStyle.PIE:\n        return 'Pie';\n      case dh.plot.SeriesPlotStyle.HISTOGRAM:\n        return 'Histogram';\n      default:\n        return type;\n    }\n  }\n\n  getTypeIcon(type: SeriesPlotStyle): React.ReactElement | null {\n    const { model } = this.props;\n    const { dh } = model;\n    switch (type) {\n      case dh.plot.SeriesPlotStyle.LINE:\n        return <LineIcon />;\n      case dh.plot.SeriesPlotStyle.BAR:\n        return <BarIcon />;\n      case dh.plot.SeriesPlotStyle.SCATTER:\n        return <ScatterIcon />;\n      case dh.plot.SeriesPlotStyle.PIE:\n        return <PieIcon />;\n      case dh.plot.SeriesPlotStyle.HISTOGRAM:\n        return <HistogramIcon />;\n      default:\n        return null;\n    }\n  }\n\n  getXAxisLabel(type: SeriesPlotStyle): string {\n    const { model } = this.props;\n    const { dh } = model;\n    switch (type) {\n      case dh.plot.SeriesPlotStyle.PIE:\n        return 'Labels';\n      case dh.plot.SeriesPlotStyle.HISTOGRAM:\n        return 'Data';\n      default:\n        return 'X-Axis';\n    }\n  }\n\n  getSeriesLabel(type: SeriesPlotStyle): string {\n    const { model } = this.props;\n    const { dh } = model;\n    switch (type) {\n      case dh.plot.SeriesPlotStyle.PIE:\n        return 'Values';\n      default:\n        return 'Series';\n    }\n  }\n\n  handleAddSeries(): void {\n    this.setState(state => {\n      const { seriesItems } = state;\n      const newSeriesItems = [...seriesItems];\n\n      const { model } = this.props;\n      const { columns } = model;\n      newSeriesItems.push({\n        id: shortid.generate(),\n        value: columns[0].name,\n      });\n\n      return { seriesItems: newSeriesItems };\n    }, this.sendChange);\n  }\n\n  handleLinkStateChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    this.setState({ isLinked: event.target.value === 'true' }, this.sendChange);\n  }\n\n  handleReset(): void {\n    const { model } = this.props;\n    const { columns, dh } = model;\n\n    const type = this.getTypes()[0];\n    const xAxis = ChartBuilder.getDefaultXAxis(type, columns) as string;\n    const seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);\n    const isLinked = true;\n\n    this.setState({ type, seriesItems, xAxis, isLinked }, this.sendChange);\n  }\n\n  handleSeriesChange(event: React.ChangeEvent<HTMLSelectElement>): void {\n    const { value } = event.target;\n    const index = event.target.getAttribute('data-index') as string;\n    const intIndex = parseInt(index, 10);\n\n    this.setState(state => {\n      let { seriesItems } = state;\n\n      seriesItems = [...seriesItems];\n      seriesItems[intIndex].value = value;\n\n      return { seriesItems };\n    }, this.sendChange);\n  }\n\n  handleSeriesDeleteClick(event: React.MouseEvent<HTMLButtonElement>): void {\n    const changeEvent = (event as unknown) as React.ChangeEvent<HTMLButtonElement>;\n    const index = changeEvent.target.getAttribute('data-index') as string;\n    const intIndex = parseInt(index, 10);\n\n    this.setState(state => {\n      const { seriesItems } = state;\n      const newSeriesItems = [...seriesItems];\n\n      newSeriesItems.splice(intIndex, 1);\n\n      return { seriesItems: newSeriesItems };\n    }, this.sendChange);\n  }\n\n  handleSubmit(event: React.FormEvent<HTMLFormElement>): void {\n    event.preventDefault();\n\n    const { onSubmit } = this.props;\n    const { type, seriesItems, xAxis, isLinked } = this.state;\n    const series = seriesItems.map(item => item.value);\n    onSubmit({\n      type,\n      series,\n      xAxis,\n      isLinked,\n    });\n  }\n\n  handleTypeClick(event: React.MouseEvent<HTMLButtonElement>): void {\n    const changeEvent = (event as unknown) as React.ChangeEvent<HTMLButtonElement>;\n    const index = changeEvent.target.getAttribute('data-index') as string;\n    const intIndex = parseInt(index, 10);\n\n    const type = this.getTypes()[intIndex];\n\n    log.debug2('handleTypeSelect', type);\n\n    this.setState(state => {\n      const { model } = this.props;\n      const { dh } = model;\n      const maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);\n      let { seriesItems } = state;\n      seriesItems = seriesItems.slice(0, maxSeriesCount);\n      if (seriesItems.length === 0 && maxSeriesCount > 0) {\n        const { columns } = model;\n        seriesItems = ChartBuilder.makeDefaultSeriesItems(dh, type, columns);\n      }\n\n      return { type, seriesItems };\n    }, this.sendChange);\n  }\n\n  handleXAxisChange(event: React.ChangeEvent<HTMLSelectElement>): void {\n    const xAxis = event.target.value;\n    log.debug2('x-axis change', xAxis);\n\n    this.setState({ xAxis }, this.sendChange);\n  }\n\n  sendChange(): void {\n    const { onChange } = this.props;\n    const { isLinked, type, seriesItems, xAxis } = this.state;\n    const series = seriesItems.map(item => item.value);\n\n    onChange({ type, series, xAxis, isLinked });\n  }\n\n  render(): JSX.Element {\n    const { model } = this.props;\n    const { columns, dh } = model;\n    const { seriesItems, type, xAxis, isLinked } = this.state;\n    const maxSeriesCount = ChartBuilder.getMaxSeriesCount(dh, type);\n    const xAxisLabel = this.getXAxisLabel(type);\n    const seriesLabel = this.getSeriesLabel(type);\n    const isSeriesVisible = seriesItems.length > 0;\n    const isAddSeriesVisible = seriesItems.length < maxSeriesCount;\n\n    return (\n      <div className=\"chart-builder\">\n        <form onSubmit={this.handleSubmit}>\n          <div className=\"form-row\">\n            <label>Select Chart Type</label>\n            <div className=\"form-row\">\n              {this.getTypes().map((chartType, index) => {\n                const key = (chartType as unknown) as React.Key;\n                return (\n                  <div key={key} className=\"col col-chart-type\">\n                    <button\n                      type=\"button\"\n                      className={classNames(\n                        'btn',\n                        'btn-icon',\n                        'btn-chart-type',\n                        {\n                          active: chartType === type,\n                        }\n                      )}\n                      data-index={index}\n                      onClick={this.handleTypeClick}\n                    >\n                      {this.getTypeIcon(chartType)}\n                      {this.getTypeName(chartType)}\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n          <hr />\n          <div className=\"form-row form-inline\">\n            <label className=\"col-2 label-left\">{xAxisLabel}</label>\n            <select\n              className=\"form-control custom-select select-x-axis col\"\n              value={xAxis}\n              onChange={this.handleXAxisChange}\n            >\n              {columns.map(column => (\n                <option key={column.name} value={column.name}>\n                  {column.name}\n                </option>\n              ))}\n            </select>\n          </div>\n          {isSeriesVisible && <hr />}\n          {seriesItems.map((seriesItem, i) => (\n            <div\n              className=\"form-row form-inline form-series-item\"\n              key={seriesItem.id}\n              data-testid={`form-series-item-${i}`}\n            >\n              <label className=\"col-2 label-left\">\n                {i === 0 ? seriesLabel : ''}\n              </label>\n              <select\n                className=\"form-control custom-select select-series col\"\n                value={seriesItem.value}\n                onChange={this.handleSeriesChange}\n                data-testid={`select-series-item-${i}`}\n                data-index={i}\n              >\n                {columns.map(column => (\n                  <option key={column.name} value={column.name} data-index={i}>\n                    {column.name}\n                  </option>\n                ))}\n              </select>\n              {seriesItems.length > 1 && (\n                <Button\n                  kind=\"ghost\"\n                  className=\"btn-delete-series ml-2 px-2\"\n                  data-index={i}\n                  data-testid={`delete-series-${i}`}\n                  onClick={this.handleSeriesDeleteClick}\n                  icon={vsTrash}\n                  tooltip=\"Delete\"\n                />\n              )}\n            </div>\n          ))}\n          {isAddSeriesVisible && (\n            <div className=\"form-row\">\n              <div className=\"col-2\" />\n              <Button\n                kind=\"ghost\"\n                className=\"btn-add-series mt-1\"\n                onClick={this.handleAddSeries}\n                icon={dhNewCircleLargeFilled}\n              >\n                Add Series\n              </Button>\n            </div>\n          )}\n          <div className=\"form-row chart-builder-link\">\n            <label className=\"col-2 label-right\">\n              <div className=\"fa-md fa-layers\">\n                <FontAwesomeIcon\n                  mask={dhTable}\n                  icon={vsCircleLargeFilled}\n                  transform=\"right-5 down-5\"\n                />\n                <FontAwesomeIcon\n                  icon={isLinked ? vsLink : dhUnlink}\n                  transform=\"grow-2 right-8 down-6\"\n                />\n              </div>\n            </label>\n            <RadioGroup\n              onChange={this.handleLinkStateChange}\n              value={`${isLinked}`}\n            >\n              <RadioItem value=\"true\">Sync State</RadioItem>\n              <RadioItem value=\"false\">Freeze State</RadioItem>\n            </RadioGroup>\n          </div>\n          <div className=\"form-row\">\n            <div className=\"col-2 label-right\" />\n            <div className=\"col chart-builder-link-info\">\n              {isLinked\n                ? 'Charts with synced state will update to match any filters or user modifications applied to the parent table.'\n                : 'Freeze State disconnects the chart state from the parent table. New filters or user modifications on the parent table will not be applied.'}\n            </div>\n          </div>\n          <div\n            className={classNames('form-row', 'justify-content-end', 'my-3')}\n          >\n            <Button\n              kind=\"secondary\"\n              className=\"btn-reset\"\n              onClick={this.handleReset}\n            >\n              Reset\n            </Button>\n            <Button kind=\"primary\" type=\"submit\" className=\"btn-submit\">\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    );\n  }\n}\n\nexport default ChartBuilder;\n"],"mappings":"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"}

package/dist/sidebar/CustomColumnBuilder.css

@@ -0,0 +1,58 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.custom-column-builder-container .section-title {
+  padding: 1rem;
+}
+.custom-column-builder-container .droppable-container {
+  padding: 1px;
+}
+.custom-column-builder-container .droppable-container.dragging {
+  background-image: linear-gradient(to right, #403e41 50%, #f0f0ee 50%), linear-gradient(to right, #403e41 50%, #f0f0ee 50%), linear-gradient(to bottom, #403e41 50%, #f0f0ee 50%), linear-gradient(to bottom, #403e41 50%, #f0f0ee 50%);
+  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: march 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.custom-column-builder-container .draggable-container {
+  background: #403e41;
+}
+.custom-column-builder-container .draggable-container .btn-drag-handle {
+  cursor: grab;
+}
+.custom-column-builder-container .draggable-container.dragging {
+  background: #343e5d;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45);
+}
+.custom-column-builder-container .custom-column-input-container {
+  padding: 1rem;
+}
+.custom-column-builder-container .error-message {
+  color: #f95d84;
+  word-wrap: break-word;
+  margin-bottom: 1.5rem;
+  font-size: 1rem;
+}
+.custom-column-builder-container .error-message p {
+  margin-bottom: 0.25rem;
+}
+.custom-column-builder-container .error-message .error-box {
+  padding: 0.25rem;
+  border-radius: 4px;
+  background: rgba(249, 93, 132, 0.13);
+}
+.custom-column-builder-container .custom-column-builder-footer {
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+.custom-column-builder-container .custom-column-builder-footer .btn-apply {
+  min-width: 10rem;
+}
+.custom-column-builder-container hr {
+  background: #373438;
+  margin: 0;
+  width: 100%;
+}
+
+/*# sourceMappingURL=CustomColumnBuilder.css.map */