@oliasoft-open-source/charts-library 2.13.0 → 2.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.13.1
+
+- Text label for drag options trigger, to make current behaviour more obvious ([OW-11102](https://oliasoft.atlassian.net/browse/OW-11102))
+
 ## 2.13.0
 
 - Added feature to save state to localStorage and clean when expired, fixed panEnable(state) bug.

package/src/components/controls/controls.jsx

@@ -66,16 +66,6 @@ const Controls = ({
                 legendEnabled={legendEnabled}
                 onToggleLegend={onToggleLegend}
               />
-              <DragOptions
-                panEnabled={panEnabled}
-                zoomEnabled={zoomEnabled}
-                onTogglePan={onTogglePan}
-                onToggleZoom={onToggleZoom}
-                enableDragPoints={enableDragPoints}
-                isDragDataAllowed={isDragDataAllowed}
-                onToggleDragPoints={onToggleDragPoints}
-                onDisableDragOptions={onDisableDragOptions}
-              />
               <Tooltip text="Download as PNG" placement="bottom-end">
                 <Button
                   small
@@ -86,6 +76,16 @@ const Controls = ({
                   onClick={onDownload}
                 />
               </Tooltip>
+              <DragOptions
+                panEnabled={panEnabled}
+                zoomEnabled={zoomEnabled}
+                onTogglePan={onTogglePan}
+                onToggleZoom={onToggleZoom}
+                enableDragPoints={enableDragPoints}
+                isDragDataAllowed={isDragDataAllowed}
+                onToggleDragPoints={onToggleDragPoints}
+                onDisableDragOptions={onDisableDragOptions}
+              />
             </>
           )}
 

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

@@ -19,25 +19,10 @@ export const DragOptions = ({
   onToggleDragPoints,
   onDisableDragOptions,
 }) => {
-  const handleToggleZoom = () => {
-    if (isDragDataAllowed) {
-      onToggleZoom();
-    } else {
-      onToggleZoom();
-      onTogglePan();
-    }
-  };
-
-  const handleToggleDragPoints = () => {
-    if (isDragDataAllowed) {
-      onDisableDragOptions();
-    } else {
-      onToggleZoom();
-    }
-  };
   // TODO: Translate strings
   const options = [
     {
+      buttonLabel: 'Drag to zoom',
       label: (
         <Flex direction="column">
           <Text>Drag to zoom</Text>
@@ -51,9 +36,10 @@ export const DragOptions = ({
       ),
       icon: <RiZoomInLine />,
       selected: zoomEnabled,
-      onClick: handleToggleZoom,
+      onClick: onToggleZoom,
     },
     {
+      buttonLabel: 'Drag to pan',
       label: (
         <Flex direction="column">
           <Text>Drag to pan</Text>
@@ -84,7 +70,7 @@ export const DragOptions = ({
       label: 'Drag disabled',
       icon: <RiForbidLine />,
       selected: !zoomEnabled && !panEnabled && !enableDragPoints,
-      onClick: handleToggleDragPoints,
+      onClick: onDisableDragOptions,
     },
   ];
 
@@ -100,34 +86,13 @@ export const DragOptions = ({
   );
 
   return (
-    <Tooltip text={selectedOption.label} placement="bottom-end">
-      {!isDragDataAllowed ? (
-        <Button
-          small
-          basic
-          colored="muted"
-          round
-          icon={selectedOption.icon}
-          onClick={selectedOption.onClick}
-        />
-      ) : (
-        <Menu
-          menu={{
-            component: (
-              <Button
-                small
-                basic
-                colored="muted"
-                round
-                icon={selectedOption.icon}
-              />
-            ),
-            label: 'Select',
-            sections: optionsWithDragPoints,
-            trigger: 'Component',
-          }}
-        />
-      )}
-    </Tooltip>
+    <Menu
+      menu={{
+        label: selectedOption.buttonLabel || selectedOption.label,
+        sections: optionsWithDragPoints,
+        trigger: 'DropDownButton',
+        small: true,
+      }}
+    />
   );
 };