amazing-react-charts 0.7.3 → 0.7.4

package/dist/core/AreaChart.js

@@ -62,9 +62,7 @@ var AreaChart = function AreaChart(props) {
   var yData = data.map(function (item) {
     return item.result;
   });
-  var xData = xType === 'time' ? data.map(function (item) {
-    return (0, _auxiliarFunctions.toDate)(item.label, dateFormat);
-  }) : data.map(function (item) {
+  var xData = data.map(function (item) {
     return item.label;
   });
 
@@ -185,7 +183,7 @@ var AreaChart = function AreaChart(props) {
       },
       axisLabel: {
         formatter: function formatter(item) {
-          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM') : item;
+          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat)) : item;
         },
         rotate: rotateLabel || 0,
         rich: {

package/dist/core/LineChart.js

@@ -143,7 +143,7 @@ var LineChart = function LineChart(props) {
       },
       axisLabel: {
         formatter: function formatter(item) {
-          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? item + '-02' : item, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM') : item;
+          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(dateFormat === 'yyyy-MM' ? item + '-02' : item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat)) : item;
         },
         rotate: rotateLabel || 0,
         textStyle: {
@@ -164,7 +164,7 @@ var LineChart = function LineChart(props) {
       axisLabel: {
         margin: yType === 'time' ? 16 : 14,
         formatter: function formatter(item) {
-          return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(item) + 'h' : item + (typeof yComplement !== 'function' ? yComplement : '');
+          return yType === 'time' ? (0, _auxiliarFunctions.timeConvert)(item) + 'h' : (0, _auxiliarFunctions.takeLabelComplement)(item, yComplement);
         },
         textStyle: {
           fontSize: fontLabelSize || 11.5

package/dist/core/VerticalBarChart.js

@@ -164,12 +164,11 @@ var VerticalBarChart = function VerticalBarChart(props) {
     return {
       value: item.result,
       label: label,
+      itemStyle: item.style,
       itemId: item.itemId && item.itemId
     };
   });
-  var xData = xType === 'time' ? data.map(function (item) {
-    return (0, _auxiliarFunctions.toDate)(item.label, dateFormat);
-  }) : data.map(function (item) {
+  var xData = data.map(function (item) {
     return item.label;
   });
 
@@ -283,7 +282,7 @@ var VerticalBarChart = function VerticalBarChart(props) {
       axisLabel: {
         rotate: rotateLabel && rotateLabel,
         formatter: function formatter(item) {
-          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd/MM/yyyy') : specialLabel(item);
+          return xType === 'time' ? (0, _auxiliarFunctions.formatTime)(item, (0, _auxiliarFunctions.getDateFormatType)(dateFormat, 'dd/MM/yyyy')) : specialLabel(item);
         },
         interval: 0,
         fontSize: 11

package/dist/lib/auxiliarFunctions.d.ts

@@ -7,7 +7,7 @@ export declare const generateAuxMessage: (label: string, result: number, complem
 export declare const monuntTimeMessage: (item: DataTooltip, stackedValues: number) => string;
 export declare const mountMessage: (value: DataTooltip, complement: Complement, axisType: string, stackedValues: number, sumDataValues: boolean) => string;
 export declare const toDate: (text: string, format?: string) => Date;
-export declare const formatTime: (text: string, dateFormat: string) => string;
+export declare const formatTime: (text: string, dateFormat?: string) => string;
 export declare const formatTooltip: (text: string, dateFormat?: string) => string;
 export declare const formatTooltipWithHours: (text: string) => string;
 export declare const truncateLabel: (text: string, labelWordSize?: number) => string;
@@ -65,3 +65,4 @@ export declare const getWidthOpts: (width: WidthProps) => {
 export declare const convertImageToBase64FromUrl: (imgUrl: string) => Promise<unknown>;
 export declare const changeSpaceForUnderline: (value: string) => string;
 export declare const formatLabelWithImage: (text: string) => string;
+export declare const getDateFormatType: (dateFormat: string, baseFormat?: string) => string;

package/dist/lib/auxiliarFunctions.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatLabelWithImage = exports.changeSpaceForUnderline = exports.convertImageToBase64FromUrl = exports.getWidthOpts = exports.getSaveAsImageWithTitle = exports.thousandSeparator = exports.getInitialValues = exports.getDataView = exports.getSaveAsImage = exports.fixedDomain = exports.getDomain = exports.fixedTruncateLabel = exports.truncateLabel = exports.formatTooltipWithHours = exports.formatTooltip = exports.formatTime = exports.toDate = exports.mountMessage = exports.monuntTimeMessage = exports.generateAuxMessage = exports.getPercentage = exports.timeConvert = exports.takeDonutChartComplement = exports.takeLabelComplement = void 0;
+exports.getDateFormatType = exports.formatLabelWithImage = exports.changeSpaceForUnderline = exports.convertImageToBase64FromUrl = exports.getWidthOpts = exports.getSaveAsImageWithTitle = exports.thousandSeparator = exports.getInitialValues = exports.getDataView = exports.getSaveAsImage = exports.fixedDomain = exports.getDomain = exports.fixedTruncateLabel = exports.truncateLabel = exports.formatTooltipWithHours = exports.formatTooltip = exports.formatTime = exports.toDate = exports.mountMessage = exports.monuntTimeMessage = exports.generateAuxMessage = exports.getPercentage = exports.timeConvert = exports.takeDonutChartComplement = exports.takeLabelComplement = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -103,7 +103,8 @@ var toDate = function toDate(text, format) {
 
 exports.toDate = toDate;
 
-var formatTime = function formatTime(text, dateFormat) {
+var formatTime = function formatTime(text) {
+  var dateFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'dd MMM';
   return (0, _format.default)(new Date(text), dateFormat, {
     locale: _ptBR.default
   });
@@ -328,4 +329,14 @@ var formatLabelWithImage = function formatLabelWithImage(text) {
   return textFormatted;
 };
 
-exports.formatLabelWithImage = formatLabelWithImage;
+exports.formatLabelWithImage = formatLabelWithImage;
+
+var getDateFormatType = function getDateFormatType(dateFormat, baseFormat) {
+  if (dateFormat === 'yyyy-MM') {
+    return baseFormat ? baseFormat : 'MMM/yy';
+  }
+
+  return dateFormat;
+};
+
+exports.getDateFormatType = getDateFormatType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazing-react-charts",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "An amazing react charts package based in echarts",
   "license": "MIT",
   "main": "dist/index.js",

package/src/core/AreaChart.tsx

@@ -9,8 +9,8 @@ import {
   getInitialValues,
   getSaveAsImage,
   timeConvert,
-  toDate,
-  takeLabelComplement
+  takeLabelComplement,
+  getDateFormatType
 } from '../lib/auxiliarFunctions'
 import {
   IDefaultChartProps,
@@ -57,10 +57,7 @@ const AreaChart = (props: IDefaultChartProps) => {
 
   const markLine = lineMarkValue && data.map(() => lineMarkValue)
   const yData = data.map((item: EntryData) => item.result)
-  const xData =
-    xType === 'time'
-      ? data.map((item: EntryData) => toDate(item.label, dateFormat))
-      : data.map((item: EntryData) => item.label)
+  const xData = data.map((item: EntryData) => item.label)
 
   const formatLabel = (chartValues: { data: number }) => {
     const { data } = chartValues
@@ -205,7 +202,7 @@ const AreaChart = (props: IDefaultChartProps) => {
       axisLabel: {
         formatter: (item: string) =>
           xType === 'time'
-            ? formatTime(item, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM')
+            ? formatTime(item, getDateFormatType(dateFormat))
             : item,
         rotate: rotateLabel || 0,
         rich: {

package/src/core/LineChart.tsx

@@ -9,6 +9,7 @@ import {
 import {
   formatTime,
   getDataView,
+  getDateFormatType,
   getInitialValues,
   getSaveAsImage,
   getWidthOpts,
@@ -161,7 +162,7 @@ const LineChart = (props: IProps) => {
           xType === 'time'
             ? formatTime(
               dateFormat === 'yyyy-MM' ? item + '-02' : item,
-              dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd MMM'
+              getDateFormatType(dateFormat)
             )
             : item,
         rotate: rotateLabel || 0,
@@ -185,7 +186,7 @@ const LineChart = (props: IProps) => {
         formatter: (item: number) =>
           yType === 'time'
             ? timeConvert(item) + 'h'
-            : item + (typeof yComplement !== 'function' ? yComplement : ''),
+            : takeLabelComplement(item, yComplement),
         textStyle: {
           fontSize: fontLabelSize || 11.5
         }

package/src/core/VerticalBarChart.tsx

@@ -17,10 +17,10 @@ import {
   getDomain,
   getSaveAsImage,
   timeConvert,
-  toDate,
   fixedTruncateLabel,
   takeLabelComplement,
-  getWidthOpts
+  getWidthOpts,
+  getDateFormatType
 } from '../lib/auxiliarFunctions'
 import { WIDTH_STYLE } from './DonutChart'
 
@@ -146,14 +146,12 @@ const VerticalBarChart = (props: IProps) => {
     return {
       value: item.result,
       label: label,
+      itemStyle: item.style,
       itemId: item.itemId && item.itemId
     }
   })
 
-  const xData =
-    xType === 'time'
-      ? data.map((item: EntryData) => toDate(item.label, dateFormat))
-      : data.map((item: EntryData) => item.label)
+  const xData = data.map((item: EntryData) => item.label)
 
   const specialLabel = (item: string) =>
     fixedTruncateLabel(item, xData.length <= 5 ? 16 : 9)
@@ -292,7 +290,7 @@ const VerticalBarChart = (props: IProps) => {
       axisLabel: {
         rotate: rotateLabel && rotateLabel,
         formatter: (item: string) => xType === 'time'
-          ? formatTime(item, dateFormat === 'yyyy-MM' ? 'MMM/yy' : 'dd/MM/yyyy')
+          ? formatTime(item, getDateFormatType(dateFormat, 'dd/MM/yyyy'))
           : specialLabel(item),
         interval: 0,
         fontSize: 11

package/src/docz/AreaChart.mdx

@@ -6,9 +6,9 @@ route: /areachart
 import AreaChart from '../core/AreaChart'
 import { Playground } from 'docz'
 
-# Area chart example
+# Demo
 
-## Demo
+## Area chart example
 <Playground>
     <AreaChart
         color='#3e2723'
@@ -42,6 +42,7 @@ import { Playground } from 'docz'
     />
 </Playground>
 
+## Area chart example with time
 <Playground>
     <AreaChart 
         color='#74007c'
@@ -65,6 +66,7 @@ import { Playground } from 'docz'
     />
 </Playground>
 
+## Area chart example with date
 <Playground>
     <AreaChart 
         xType='time'
@@ -134,3 +136,22 @@ import { Playground } from 'docz'
     />
 </Playground>
 
+## Area chart example with date and time
+<Playground>
+    <AreaChart 
+        xType='time'
+        dateFormat="MMM/dd HH:mm"
+        title='area chart data'
+        toolboxTooltip={{ saveAsImage: 'saving'}}
+        tooltip={ { label: 'Data', result: 'O.S. em aberto' } }
+        color='#E65100'
+        data={ 
+            [ 
+                { label: '2019-09-01 08:40', result: 1 }, 
+                { label: '2019-09-02 12:32', result: 4 },
+                { label: '2019-09-03 14:20', result: 3 }, 
+                { label: '2019-09-04 19:25', result: 2 },
+            ] 
+        }
+    />
+</Playground>

package/src/docz/LineChart.mdx

@@ -6,9 +6,9 @@ route: /line-charts
 import LineChart from '../core/LineChart'
 import { Playground } from 'docz'
 
-# line chart example
+# Demo
 
-## Demo
+## line chart example
 <Playground>
     <LineChart
         showLabel
@@ -57,3 +57,40 @@ import { Playground } from 'docz'
         ] }
     />
 </Playground>
+
+
+## line chart example with date and time
+<Playground>
+    <LineChart
+        showLabel
+        title='Concurrent lines'
+        xType='time'
+        toolboxTooltip={{ saveAsImage: 'saving'}}
+        dateFormat='MMM/dd HH:mm'
+        colors={ ['red', 'green', 'blue'] }
+        data={ [ 
+            {
+                name: 'top line',
+                values: [
+                    { label: '2019-01 08:40', result: 10 }, 
+                    { label: '2019-02 09:12', result: 40 },
+                    { label: '2019-03 10:25', result: 30 }, 
+                    { label: '2019-04 12:30', result: 20 },
+                    { label: '2019-05 14:30', result: 40 },
+                    { label: '2019-06 18:45', result: 50 }
+                ]
+            },
+             {
+                name: 'bottom line',
+                values: [
+                    { label: '2019-01 08:40', result: 1 }, 
+                    { label: '2019-02 09:12', result: 4 },
+                    { label: '2019-03 10:25', result: 3 }, 
+                    { label: '2019-04 12:30', result: 2 },
+                    { label: '2019-05 14:30', result: 4 },
+                    { label: '2019-06 18:45', result: 5 }
+                ]
+            }
+        ] }
+    />
+</Playground>

package/src/docz/VerticalBarChart.mdx

@@ -6,8 +6,9 @@ route: /vertical-bar-chart
 import VerticalBarChart from "../core/VerticalBarChart";
 import { Playground } from "docz";
 
-# Vertical bar chart example
+# Demo
 
+## Vertical bar chart example
 <Playground>
   <VerticalBarChart
     showBarLabel
@@ -163,8 +164,7 @@ import { Playground } from "docz";
   />
 </Playground>
 
-# Vertical bar chart example with customMaxDomain
-
+## Vertical bar chart example with customMaxDomain
 <Playground>
   <VerticalBarChart
     showBarLabel
@@ -189,8 +189,7 @@ import { Playground } from "docz";
   />
 </Playground>
 
-# Vertical bar chart with dateFormat
-
+## Vertical bar chart with dateFormat
 <Playground>
   <VerticalBarChart
     showBarLabel
@@ -211,8 +210,7 @@ import { Playground } from "docz";
   />
 </Playground>
 
-# Vertical bar chart with time format
-
+## Vertical bar chart with time format
 <Playground>
   <VerticalBarChart
     showBarLabel
@@ -240,3 +238,36 @@ import { Playground } from "docz";
     ]}
   />
 </Playground>
+
+## Vertical bar chart with yComplement like a function
+<Playground>
+        <VerticalBarChart
+  yComplement={value => value === 1 ? 'Saudavel' : value ===  2 ? 'Alerta' : value === 3 ? 'Crítico' : ''}
+  xType="time"
+  yType="value"
+  color="green"
+  customMaxDomain={3}
+  dateFormat='yyyy-MM-dd'
+  tooltip={{ label: 'Data', result: 'Sáude' }}
+  data={[
+    {
+      label: '2023-06-29',
+      result: '1',
+      itemId: 1,
+      style: { color: 'green' }
+    },
+    {
+      label: '2023-06-30',
+      result: '3',
+      itemId: 1,
+      style: { color: 'red' }
+    }, 
+    {
+      label: '2023-07-01',
+      result: '2',
+      itemId: 1,
+      style: { color: 'yellow' }
+    }
+  ]}
+/>
+</Playground>

package/src/lib/auxiliarFunctions.ts

@@ -154,7 +154,7 @@ export const mountMessage = (
 export const toDate = (text: string, format?: string) =>
   parse(text, format ? format : 'yyyy-MM-dd', new Date())
 
-export const formatTime = (text: string, dateFormat: string) =>
+export const formatTime = (text: string, dateFormat = 'dd MMM') =>
   format(new Date(text), dateFormat, { locale: ptBR })
 
 export const formatTooltip = (text: string, dateFormat?: string) =>
@@ -345,3 +345,11 @@ export const formatLabelWithImage = (text: string) => {
 
   return textFormatted
 }
+
+export const getDateFormatType = (dateFormat: string, baseFormat?: string) => {
+  if (dateFormat === 'yyyy-MM') {
+    return baseFormat ? baseFormat : 'MMM/yy'
+  }
+  
+  return dateFormat
+}