@oliasoft-open-source/charts-library 2.13.4 → 2.14.0-beta-1

package/src/components/controls/controls.jsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import {
-  RiFileDownloadLine,
-  RiLineChartLine,
-  RiTableLine,
-} from 'react-icons/ri';
-import { LineOptions } from './line-options';
-import { DragOptions } from './drag-options';
-import { AxesOptions } from './axes-options/axes-options';
-import { LegendOptions } from './legend-options';
-import styles from './controls.module.less';
-
-const Controls = ({
-  axes,
-  controlsAxesLabels,
-  chart,
-  headerComponent,
-  legendEnabled,
-  lineEnabled,
-  onDownload,
-  onResetAxes,
-  onUpdateAxes,
-  onToggleLegend,
-  onToggleLine,
-  onTogglePan,
-  onTogglePoints,
-  onToggleTable,
-  onToggleZoom,
-  panEnabled,
-  pointsEnabled,
-  initialAxesRanges,
-  showTable,
-  subheaderComponent,
-  table,
-  zoomEnabled,
-  depthType,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
-}) => {
-  return (
-    <>
-      <div className={styles.controls}>
-        {!!chart.options.title && <Text bold>{chart.options.title}</Text>}
-        {headerComponent}
-        <div className={styles.buttons}>
-          {!showTable && (
-            <>
-              <AxesOptions
-                initialAxesRanges={initialAxesRanges}
-                axes={axes}
-                controlsAxesLabels={controlsAxesLabels}
-                onUpdateAxes={onUpdateAxes}
-                onResetAxes={onResetAxes}
-                depthType={depthType}
-              />
-              <LineOptions
-                lineEnabled={lineEnabled}
-                pointsEnabled={pointsEnabled}
-                onToggleLine={onToggleLine}
-                onTogglePoints={onTogglePoints}
-              />
-              <LegendOptions
-                legendEnabled={legendEnabled}
-                onToggleLegend={onToggleLegend}
-              />
-              <Tooltip text="Download as PNG" placement="bottom-end">
-                <Button
-                  small
-                  basic
-                  colored="muted"
-                  round
-                  icon={<RiFileDownloadLine />}
-                  onClick={onDownload}
-                />
-              </Tooltip>
-              <DragOptions
-                panEnabled={panEnabled}
-                zoomEnabled={zoomEnabled}
-                onTogglePan={onTogglePan}
-                onToggleZoom={onToggleZoom}
-                enableDragPoints={enableDragPoints}
-                isDragDataAllowed={isDragDataAllowed}
-                onToggleDragPoints={onToggleDragPoints}
-                onDisableDragOptions={onDisableDragOptions}
-              />
-            </>
-          )}
-
-          {table ? (
-            <Tooltip
-              text={showTable ? 'Show chart' : 'Show table'}
-              placement="bottom-end"
-            >
-              <Button
-                small
-                basic
-                colored="muted"
-                round
-                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
-                onClick={onToggleTable}
-              />
-            </Tooltip>
-          ) : null}
-        </div>
-      </div>
-      {subheaderComponent}
-    </>
-  );
-};
-
-export default Controls;

package/src/components/controls/drag-options.jsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Flex,
-  Menu,
-  Text,
-  Tooltip,
-} from '@oliasoft-open-source/react-ui-library';
-import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
-import { TbHandStop } from 'react-icons/tb';
-
-export const DragOptions = ({
-  onTogglePan,
-  onToggleZoom,
-  panEnabled,
-  zoomEnabled,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
-}) => {
-  // TODO: Translate strings
-  const options = [
-    {
-      buttonLabel: 'Drag to zoom',
-      label: (
-        <Flex direction="column">
-          <Text>Drag to zoom</Text>
-          {/* <Text small muted>
-            Hold shift to change axis
-          </Text> */}
-          <Text small muted>
-            Double click on canvas to reset
-          </Text>
-        </Flex>
-      ),
-      icon: <RiZoomInLine />,
-      selected: zoomEnabled,
-      onClick: onToggleZoom,
-    },
-    {
-      buttonLabel: 'Drag to pan',
-      label: (
-        <Flex direction="column">
-          <Text>Drag to pan</Text>
-          {/* <Text small muted>
-            Hold shift to change axis
-          </Text> */}
-          <Text small muted>
-            Double click on canvas to reset
-          </Text>
-        </Flex>
-      ),
-      icon: <RiDragMove2Line />,
-      selected: panEnabled,
-      onClick: onTogglePan,
-    },
-    ...(isDragDataAllowed
-      ? [
-          {
-            label: 'Drag to move points',
-            icon: <TbHandStop />,
-            selected: enableDragPoints,
-            type: 'Option',
-            onClick: onToggleDragPoints,
-          },
-        ]
-      : []),
-    {
-      label: 'Drag disabled',
-      icon: <RiForbidLine />,
-      selected: !zoomEnabled && !panEnabled && !enableDragPoints,
-      onClick: onDisableDragOptions,
-    },
-  ];
-
-  const selectedOption = options.filter((option) => option.selected)[0];
-  const optionsWithDragPoints = options.map(
-    ({ icon, label, onClick, selected }) => ({
-      icon,
-      label,
-      type: 'Option',
-      onClick,
-      disabled: selected,
-    }),
-  );
-
-  return (
-    <Menu
-      menu={{
-        label: selectedOption.buttonLabel || selectedOption.label,
-        sections: optionsWithDragPoints,
-        trigger: 'DropDownButton',
-        small: true,
-      }}
-    />
-  );
-};

package/src/components/controls/legend-options.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import { RiListUnordered } from 'react-icons/ri';
-import listHideIcon from '../../assets/icons/list-hide.svg';
-
-export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
-  // TODO: Translate strings
-  return (
-    <Tooltip
-      text={legendEnabled ? 'Legend shown' : 'Legend hidden'}
-      placement="bottom"
-    >
-      <Button
-        small
-        basic
-        colored="muted"
-        round
-        icon={
-          legendEnabled ? <RiListUnordered /> : <Icon icon={listHideIcon} />
-        }
-        onClick={onToggleLegend}
-      />
-    </Tooltip>
-  );
-};