Merge pull request #54 from nginformatica/fix/diverging-and-pie-charts

Fix: diverging and donut charts
nginformatica · Apr 1, 2024 · 6fa7d57 · 6fa7d57
2 parents e4c90f9 + b9b6567
commit 6fa7d57
Show file tree

Hide file tree

Showing 7 changed files with 1,052 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "amazing-react-charts",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "An amazing react charts package based in echarts",
   "license": "MIT",
   "main": "dist/index.js",
@@ -43,13 +43,13 @@
     "ramda": "0.29.1"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.9",
-    "@babel/core": "7.24.0",
-    "@babel/plugin-transform-modules-commonjs": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.24.0",
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/cli": "7.24.1",
+    "@babel/core": "7.24.3",
+    "@babel/plugin-transform-modules-commonjs": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.3",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addon-styling-webpack": "0.0.6",
     "@storybook/blocks": "7.6.17",
@@ -58,13 +58,13 @@
     "@storybook/testing-library": "0.2.2",
     "@stylistic/eslint-plugin": "1.5.4",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.1",
+    "@testing-library/react": "14.2.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/ramda": "0.29.11",
-    "@types/react": "18.2.61",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@typescript-eslint/parser": "7.1.0",
+    "@types/ramda": "0.29.12",
+    "@types/react": "18.2.73",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-imports": "2.0.0",
     "canvas": "2.11.2",
@@ -73,7 +73,7 @@
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -84,8 +84,8 @@
     "styled-components": "6.1.8",
     "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3",
-    "webpack": "5.90.3"
+    "typescript": "5.4.3",
+    "webpack": "5.91.0"
   },
   "peerDependencies": {
     "react": "16.x || 17.x || 18.x",

diff --git a/src/commonStyles.ts b/src/commonStyles.ts
@@ -34,6 +34,11 @@ export const PictorialWrapper = styled.div`
     margin: 0 auto;
 `
 
+export const DonutWrapper = styled.div`
+    width: 500px;
+    margin: 0 auto;
+`
+
 export const ChartStorieWrapper = styled.div`
     width: 50%;
     margin: 0 auto;

diff --git a/src/core/diverging-stacked-bar-chart/DivergingStackedBarChart.tsx b/src/core/diverging-stacked-bar-chart/DivergingStackedBarChart.tsx
@@ -74,6 +74,13 @@ export interface IProps extends Omit<IDefaultChartProps, 'data'> {
     ): void
 }
 
+interface TooltipParams {
+    axisValueLabel: string
+    marker: string
+    seriesName: string
+    value: number
+}
+
 export const clickBar = (item: { data: { value: string } }) => {
     if ('data' in item && 'value' in item.data) {
         const value = item.data.value
@@ -161,6 +168,36 @@ const DivergingStackedBarChart = (props: IProps) => {
         }
     }
 
+    const formatTooltip = (params: TooltipParams[]) => {
+        const tooltipString = `<div style="margin-bottom: 6px">
+                ${params[0].axisValueLabel}<br/>
+            </div>`
+
+        const details = params
+            .map(
+                obj =>
+                    `<div style="display: flex; align-items: center; margin-top: 4px;">
+                    ${obj.marker}
+                    <div
+                        style="
+                            width: 100%;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;">
+                        <div>
+                            ${obj.seriesName}
+                        </div>
+                        <div style="font-weight: 600; padding-left: 16px;">
+                            ${Math.abs(obj.value)}
+                        </div>
+                    </div>
+                </div>`
+            )
+            .join('')
+
+        return tooltipString + details
+    }
+
     const exportToCSV = () => {
         const { seriesData, categories } = props.data
 
@@ -200,7 +237,10 @@ const DivergingStackedBarChart = (props: IProps) => {
         stack: 'Total',
         label: {
             show: true,
-            position: seriesItem.labelPosition || 'inside'
+            position: seriesItem.labelPosition || 'inside',
+            formatter: function (params: { value: number }) {
+                return Math.abs(params.value)
+            }
         },
         emphasis: {
             focus: 'series'
@@ -212,6 +252,7 @@ const DivergingStackedBarChart = (props: IProps) => {
     }))
 
     const options: EChartsOption = {
+        // @ts-expect-error The echarts type doesn't match with this
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -223,14 +264,14 @@ const DivergingStackedBarChart = (props: IProps) => {
                 fontSize: 11.5,
                 color: '#FFFFFF'
             },
-            extraCssText: 'border: none; padding: 6px;'
+            extraCssText: 'border: none; padding: 6px;',
+            formatter: formatTooltip
         },
         legend: {
             data: data.seriesData.map(item => item.name)
         },
         title: {
             left: legendType === 'scroll' ? '0.1%' : '4%',
-            // top: legendType === 'scroll' && '5.7%',
             top: legendType,
             show: title,
             text: titleProps,
@@ -258,7 +299,12 @@ const DivergingStackedBarChart = (props: IProps) => {
         },
         xAxis: [
             {
-                type: 'value'
+                type: 'value',
+                axisLabel: {
+                    formatter: function (value: number) {
+                        return Math.abs(value).toString()
+                    }
+                }
             }
         ],
         yAxis: [
@@ -286,8 +332,7 @@ const DivergingStackedBarChart = (props: IProps) => {
                 style={CHART_WIDTH}
                 opts={getWidthOpts(width || 'auto')}
                 option={options}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
+                // @ts-expect-error The echarts type doesn't match with this
                 onEvents={clickEvent}
             />
             {props.showCSVDownload && (

diff --git a/src/core/donut-chart/DonutChart.stories.tsx b/src/core/donut-chart/DonutChart.stories.tsx
@@ -3,6 +3,7 @@ import type { IDonutProps } from './DonutChart'
 import type { Meta, StoryObj } from '@storybook/react'
 import { argTypesDisableDonut } from '../disableControls'
 import DonutChart from './DonutChart'
+import { DonutWrapper } from '../../commonStyles'
 
 const meta: Meta<typeof DonutChart> = {
     title: 'Charts/Donut Chart',
@@ -19,11 +20,6 @@ const meta: Meta<typeof DonutChart> = {
                 disable: true
             }
         },
-        legendType: {
-            table: {
-                disable: true
-            }
-        },
         colors: {
             description: 'The chart data colors.',
             odd: {
@@ -63,6 +59,11 @@ const meta: Meta<typeof DonutChart> = {
             control: { type: 'radio' },
             description: 'The chart legend position.'
         },
+        legendType: {
+            options: ['scroll', 'plain'],
+            control: { type: 'radio' },
+            description: 'The chart legend type.'
+        },
         tooltip: {
             label: { control: 'text' },
             result: { control: 'text' },
@@ -136,3 +137,35 @@ export const donutChartWithInsideLegend: Story = {
         ]
     }
 }
+
+export const donutChartWithScrollableLegend: Story = {
+    render: (args: IDonutProps) => {
+        return (
+            <DonutWrapper>
+                <DonutChart {...args} />
+            </DonutWrapper>
+        )
+    },
+    args: {
+        selectedMode: true,
+        title: 'Donut Chart With Scrollable Legend',
+        colors: ['blue', 'green', 'red', 'purple', 'pink', 'orange'],
+        donutRadius: ['40%', '70%'],
+        resultFormatType: 'percent',
+        center: ['50%', '50%'],
+        legendPosition: 'inside',
+        legendType: 'scroll',
+        labelFontColor: 'white',
+        centerPieValueFontSize: 25,
+        donutCenterValue: '78,20%',
+        toolboxTooltip: { saveAsImage: { title: 'Save as Image' } },
+        data: [
+            { name: 'Água', value: 281 },
+            { name: 'Suco de limão', value: 156 },
+            { name: 'Suco de frutas vermelhas', value: 77 },
+            { name: 'Suco de uva', value: 68 },
+            { name: 'Refrigerante', value: 253 },
+            { name: 'Cerveja', value: 217 }
+        ]
+    }
+}
diff --git a/src/core/donut-chart/DonutChart.tsx b/src/core/donut-chart/DonutChart.tsx
@@ -26,6 +26,7 @@ export interface IDonutProps extends IProps {
     donutRadius: [string, string]
     centerPieValueFontSize?: number
     selectedMode?: boolean
+    legendType?: 'scroll' | 'plain'
 }
 
 const DonutChart = (props: IDonutProps) => {
@@ -40,6 +41,7 @@ const DonutChart = (props: IDonutProps) => {
         pieceBorderColor,
         tooltip,
         legendPosition,
+        legendType,
         labelFontColor,
         centerPieValueFontSize,
         selectedMode,
@@ -159,6 +161,8 @@ const DonutChart = (props: IDonutProps) => {
             top: 280,
             data: xData,
             icon: 'shape',
+            type: legendType || 'plain',
+            itemGap: legendType === 'scroll' ? 40 : 10,
             textStyle: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
                 fontWeight: 400,

diff --git a/stories/intro.stories.mdx b/stories/intro.stories.mdx
@@ -4,7 +4,7 @@ import { Meta } from "@storybook/blocks"
 
 > This document is under development
 
-# Amazing React Charts - v1.0.7
+# Amazing React Charts - v1.0.8
 
 # Introduction