@oliasoft-open-source/charts-library 2.8.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.9.0
+
+- Add double-click event on chart area, change reset chart ranges from one click to double click ([OW-10412](https://oliasoft.atlassian.net/browse/OW-10412))
+
 ## 2.8.0
 
 - Simplify dist-tag strategy for beta version releases (to reduce cleanup effort) ([OW-10003](https://oliasoft.atlassian.net/browse/OW-10003))

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

@@ -130,7 +130,7 @@ const AxesOptionsPopover = ({
           disabled={!isCustomValue}
         />
         <Text small muted>
-          or click on canvas
+          or double click on canvas
         </Text>
       </Flex>
     </>

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

@@ -23,7 +23,7 @@ export const DragOptions = ({
             Hold shift to change axis
           </Text> */}
           <Text small muted>
-            Click on canvas to reset
+            Double click on canvas to reset
           </Text>
         </Flex>
       ),
@@ -42,7 +42,7 @@ export const DragOptions = ({
             Hold shift to change axis
           </Text> */}
           <Text small muted>
-            Click on canvas to reset
+            Double click on canvas to reset
           </Text>
         </Flex>
       ),

package/src/components/line-chart/line-chart.jsx

@@ -295,7 +295,8 @@ const LineChart = (props) => {
     chartInstance.update();
   };
 
-  const onClick = (evt, elements, chartInstance) => {
+  const resetZoom = () => {
+    const chartInstance = chartRef.current;
     chartInstance.resetZoom();
     dispatch({ type: RESET_AXES_RANGES });
   };
@@ -459,7 +460,6 @@ const LineChart = (props) => {
               datasets: generatedDatasets,
             }}
             options={{
-              onClick,
               onHover,
               maintainAspectRatio: chartStyling.maintainAspectRatio,
               aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
@@ -517,8 +517,27 @@ const LineChart = (props) => {
                   borderColor: BORDER_COLOR,
                 },
               },
+              events: [
+                'mousemove',
+                'mouseout',
+                'click',
+                'touchstart',
+                'touchmove',
+                'dblclick',
+              ],
             }}
-            plugins={getPlugins(graph, legend, state)}
+            plugins={[
+              ...getPlugins(graph, legend, state),
+              {
+                id: 'customEventCatcher',
+                beforeEvent(chart, args, pluginOptions) {
+                  const { event } = args;
+                  if (event.type === 'dblclick') {
+                    resetZoom();
+                  }
+                },
+              },
+            ]}
           />
         </div>
       )}