@majoo-ui/react 2.0.1 → 2.1.0-rc.0

package/components/chart/lineChart/LineChart.esm.js

@@ -0,0 +1,358 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { foundations } from '@majoo-ui/core';
+import { useState, useEffect } from 'react';
+import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip, Line } from 'recharts';
+import { Image } from '../../image/Image.esm.js';
+import Text from '../../text/Text.esm.js';
+import { styled } from '../../../config/stitches.config.esm.js';
+import img from '../assets/data_kosong.png.esm.js';
+import { isValidDate, handleXaxis, roundDown, roundUp, compactCurrency } from '../utils/index.esm.js';
+import Comparator from './components/Comparator.esm.js';
+import TitleLegend from './components/TitleLegend.esm.js';
+import Tooltip$1 from './components/Tooltip.esm.js';
+
+const {
+  colors
+} = foundations;
+const Container = styled('div', {
+  '@sm': {
+    overflowY: 'hidden',
+    whiteSpace: 'nowrap',
+    overflowX: 'scroll',
+    scrollbarWidth: 0,
+    '&::-webkit-scrollbar': {
+      width: 0,
+      height: 0
+    }
+  },
+  '@md': {
+    overflowX: 'auto',
+    overflowY: 'auto',
+    whiteSpace: 'wrap'
+  }
+});
+const ErrorWrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  flexDirection: 'column',
+  variants: {
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    }
+  }
+});
+const StyledContainer = styled('div', {
+  position: 'relative',
+  '@md': {
+    width: '100%',
+    height: 300
+  },
+  '& circle': {
+    r: 4
+  },
+  'g.yAxis text': {
+    fontSize: '$label',
+    lineHeight: '$label',
+    fontWeight: '500',
+    fill: '$textSecondary'
+  },
+  'g.xAxis text': {
+    fontSize: '$label',
+    lineHeight: '$label',
+    fontWeight: '500',
+    fill: '$textPrimary'
+  },
+  variants: {
+    hidden: {
+      true: {
+        '& > #responsive-container': {
+          display: 'none'
+        }
+      }
+    },
+    isEmpty: {
+      true: {
+        '@sm': {
+          width: 'auto',
+          height: 254,
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      },
+      false: {
+        '@sm': {
+          width: 900,
+          height: 254,
+          display: 'inline-block',
+          justifyContent: 'unset'
+        }
+      }
+    }
+  }
+});
+const ContainerLoading = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: '$docked',
+  position: 'absolute',
+  inset: 0,
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: '$bgWhite',
+  opacity: 0.8,
+  userSelect: 'none',
+  variants: {
+    loading: {
+      false: {
+        display: 'none'
+      }
+    }
+  }
+});
+const COMPARISON_LIMIT = 5;
+function LineChart(props) {
+  const {
+    title,
+    description,
+    data,
+    legendData,
+    xAxisKey,
+    isLoading,
+    period,
+    customXAxisFormat,
+    customYAxisFormat,
+    roundUpYAxis,
+    placeholder,
+    comparatorList,
+    chartTypeLabel,
+    onComparatorChange,
+    customTooltipDate
+  } = props;
+  const [isDividedByThousand, setIsDividedByThousand] = useState(false);
+  const [isComparator, setIsComparator] = useState(false);
+  const [hover, setHover] = useState(null);
+  const [filteredData, setFilteredData] = useState([]);
+  const [maxData, setMaxData] = useState(0);
+  useEffect(() => {
+    if (maxData > 0) {
+      setIsDividedByThousand(String(Math.round(maxData)).length > 10);
+    }
+  }, [maxData]);
+  useEffect(() => {
+    setFilteredData(legendData.map(value => Object.assign(Object.assign({}, value), {
+      hide: false,
+      isCurrency: !!value.isCurrency
+    })));
+    if (legendData.length === 0) {
+      setFilteredData([{
+        dataKey: 'novalue',
+        name: 'novalue',
+        color: colors.chartYellow,
+        hide: true
+      }]);
+      setIsComparator(false);
+    }
+    if (legendData.some(l => l.isComparator === true)) {
+      setIsComparator(true);
+      setFilteredData(legendData.map(value => Object.assign(Object.assign({}, value), {
+        hide: false
+      })).slice(0, COMPARISON_LIMIT));
+    }
+  }, [legendData]);
+  const handleActiveDot = e => {
+    const {
+      cx,
+      cy,
+      fill
+    } = e;
+    if (e.dataKey === hover) {
+      return jsx("circle", {
+        cx: cx,
+        cy: cy,
+        r: 10,
+        fill: colors.white,
+        stroke: fill,
+        strokeWidth: 3
+      });
+    }
+    return jsx("circle", {
+      cx: cx,
+      cy: cy,
+      r: 10,
+      fill: "#00000000",
+      stroke: "#00000000",
+      strokeWidth: 3
+    });
+  };
+  return jsxs(Fragment, {
+    children: [jsx(TitleLegend, {
+      title: title,
+      description: description,
+      legendData: legendData,
+      filteredData: filteredData,
+      setFilteredData: setFilteredData,
+      isComparator: isComparator,
+      isDividedByThousand: isDividedByThousand,
+      titleOnly: data.length === 0
+    }), jsx(Container, {
+      children: jsxs(StyledContainer, {
+        hidden: data.length < 1,
+        isEmpty: data.length < 1,
+        children: [jsx(ResponsiveContainer, {
+          id: "responsive-container",
+          children: jsxs(LineChart$1, {
+            data: legendData.length === 0 ? data.map(d => Object.assign(Object.assign({}, d), {
+              novalue: 0
+            })) : data,
+            margin: {
+              top: 20,
+              bottom: 5,
+              right: 20
+            },
+            children: [jsx(XAxis, {
+              dataKey: xAxisKey,
+              padding: {
+                left: 20
+              },
+              interval: "preserveEnd",
+              tickLine: false,
+              axisLine: false,
+              hide: data.length === 0,
+              dy: 10,
+              tickFormatter: dateValue => {
+                if (!isValidDate(dateValue)) return dateValue;
+                if (customXAxisFormat) {
+                  return customXAxisFormat(dateValue);
+                }
+                if (period) {
+                  return handleXaxis(dateValue, period);
+                }
+                return dateValue;
+              }
+            }), jsx(YAxis, {
+              textAnchor: "start",
+              tickLine: false,
+              axisLine: false,
+              dy: -10,
+              dx: -50,
+              type: "number",
+              tickCount: maxData === 0 ? 3 : 5,
+              allowDecimals: roundUpYAxis,
+              tickFormatter: val => {
+                if (customYAxisFormat) {
+                  return customYAxisFormat(val);
+                }
+                return compactCurrency(val);
+              },
+              domain: [dataMin => dataMin < 0 ? roundDown(dataMin) : 0, dataMax => {
+                setMaxData(dataMax);
+                return roundUpYAxis ? roundUp(dataMax) : dataMax;
+              }]
+            }), jsx(CartesianGrid, {
+              vertical: false,
+              x: 0,
+              width: 9999
+            }), jsx(Tooltip, {
+              cursor: false,
+              content: jsx(Tooltip$1, {
+                hover: hover,
+                xAxisKey: xAxisKey,
+                chartTypeLabel: chartTypeLabel,
+                legendData: filteredData,
+                maxValue: maxData,
+                customTooltipDate: customTooltipDate
+              })
+            }), !isLoading && filteredData.map(legend => data.length === 1 ? jsx(Line, {
+              type: "monotone",
+              dot: false,
+              dataKey: legend.dataKey,
+              stroke: legend.color,
+              hide: legend.hide,
+              strokeWidth: 4,
+              onMouseOver: () => setHover(legend.dataKey),
+              activeDot: {
+                onMouseOver: (_, b) => {
+                  const {
+                    cx,
+                    cy,
+                    fill
+                  } = b;
+                  setHover(legend.dataKey);
+                  return jsx("circle", {
+                    cx: cx,
+                    cy: cy,
+                    r: 10,
+                    fill: colors.white,
+                    stroke: fill,
+                    strokeWidth: 3
+                  });
+                },
+                onMouseLeave: () => setHover(null)
+              }
+            }, legend.name) : jsx(Line, {
+              type: "monotone",
+              dot: false,
+              dataKey: legend.dataKey,
+              stroke: legend.color,
+              hide: legend.hide,
+              strokeWidth: 4,
+              onMouseOver: () => setHover(legend.dataKey),
+              activeDot: handleActiveDot
+            }, legend.name))]
+          })
+        }), jsxs(ErrorWrapper, {
+          hidden: data.length > 0,
+          children: [jsx(Image, {
+            src: img,
+            alt: "no-data-content"
+          }), jsx(Text, {
+            variant: "status",
+            children: "Tidak ada data yang dapat ditampilkan"
+          })]
+        }), jsx(ContainerLoading, {
+          loading: isLoading,
+          children: jsx(Text, {
+            variant: "caption",
+            children: "Loading .... "
+          })
+        })]
+      })
+    }), isComparator && comparatorList && jsx(Comparator, {
+      legendData: comparatorList,
+      placeholder: placeholder,
+      option: filteredData,
+      onCloseClick: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'DELETE',
+        payload: x
+      }),
+      onComparatorAdd: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'ADD',
+        payload: x
+      }),
+      onComparatorSearch: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'SEARCH',
+        payload: x
+      })
+    })]
+  });
+}
+LineChart.defaultProps = {
+  customXAxisFormat: undefined,
+  onComparatorChange: undefined,
+  comparatorList: [],
+  placeholder: 'Cari ...',
+  roundUpYAxis: true,
+  period: undefined
+};
+
+export { COMPARISON_LIMIT, LineChart as default };

package/components/chart/lineChart/components/Comparator.esm.js

@@ -0,0 +1,82 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import { COMPARISON_LIMIT } from '../LineChart.esm.js';
+import ComparatorItem from './ComparatorItem.esm.js';
+import ComparatorController from './ComparatorController.esm.js';
+
+const Comparator = props => {
+  const {
+    option,
+    onCloseClick,
+    onComparatorAdd,
+    legendData,
+    placeholder,
+    onComparatorSearch
+  } = props;
+  const [filteredOption, setFilteredOption] = useState(option);
+  const [isDisableClose, setIsDisableClose] = useState(false);
+  const visibleOptions = option.filter(opt => !opt.hide);
+  useEffect(() => {
+    setFilteredOption(legendData.filter(f => !option.some(l => {
+      if (typeof l.value === 'number') {
+        return +l.value === +f.value;
+      }
+      if (typeof l.value === 'string') {
+        return String(l.value) === String(f.value);
+      }
+      return false;
+    })));
+    if (option.length === 1) {
+      setIsDisableClose(true);
+    } else {
+      setIsDisableClose(false);
+    }
+  }, [option, legendData]);
+  const Container = styled(Flex, {
+    borderRadius: 8,
+    marginTop: '$spacing-02',
+    '@sm': {
+      display: 'grid',
+      gap: 8,
+      gridTemplateColumns: 'repeat(2,1fr)',
+      boxShadow: 'none',
+      backgroundColor: 'transparent'
+    },
+    '@md': {
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: 'fit-content',
+      rowGap: '$compact',
+      boxShadow: '$small',
+      backgroundColor: '$white'
+    },
+    '& > #comparator-item:last-child > #separator-item': {
+      display: 'none'
+    }
+  });
+  return jsxs(Container, {
+    children: [visibleOptions.map(opt => jsx(ComparatorItem, {
+      dataKey: opt.dataKey,
+      color: opt.color,
+      onCloseClick: () => onCloseClick(opt),
+      variants: opt.variants,
+      disableClose: isDisableClose
+    }, opt.value)), option.length < COMPARISON_LIMIT && filteredOption.length > 0 && jsx(ComparatorController, {
+      option: filteredOption,
+      onComparatorAdd: d => onComparatorAdd(d),
+      onComparatorSearch: keyword => onComparatorSearch(keyword),
+      placeholder: placeholder
+    })]
+  });
+};
+Comparator.defaultProps = {
+  option: [{}]
+};
+
+export { Comparator as default };

package/components/chart/lineChart/components/ComparatorController.esm.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../button/Button.esm.js';
+import { InputSelect } from '../../../form/components/InputSelect/InputSelect.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import { PlusOutline } from '@majoo-ui/icons';
+import { foundations } from '@majoo-ui/core';
+
+const {
+  colors
+} = foundations;
+const ComparatorController = ({
+  option,
+  onComparatorAdd,
+  onComparatorSearch,
+  placeholder
+}) => {
+  const [toggle, setToggle] = useState(true);
+  const [selectedValue, setSelectedValue] = useState();
+  const ref = useRef(null);
+  const handleToggle = () => {
+    setToggle(!toggle);
+  };
+  const handleSelected = selected => {
+    onComparatorAdd(selected);
+    setSelectedValue(undefined);
+    setToggle(true);
+  };
+  const handleSearch = keyword => {
+    onComparatorSearch(keyword);
+    return keyword;
+  };
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target) && !toggle) {
+        setToggle(!toggle);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, toggle, selectedValue]);
+  return jsxs(React__default.Fragment, {
+    children: [jsx(Box, {
+      css: {
+        display: toggle ? 'flex' : 'none',
+        justifyContent: 'center',
+        alignItems: 'center',
+        '@sm': {
+          padding: 0
+        }
+      },
+      children: jsx(Button, {
+        buttonType: "ghost",
+        css: {
+          fontWeight: 600,
+          fontSize: 14,
+          '@sm': {
+            height: 60,
+            width: '100%',
+            backgroundColor: '$white',
+            boxShadow: '$small',
+            borderRadius: '$md'
+          },
+          '@md': {
+            height: 'auto',
+            width: 'auto',
+            backgroundColor: 'none',
+            boxShadow: 'none',
+            borderRadius: 'none'
+          }
+        },
+        leftIcon: jsx(PlusOutline, {
+          size: 24,
+          color: colors.primary500
+        }),
+        onClick: () => handleToggle(),
+        children: "Perbandingan"
+      })
+    }), jsx(Box, {
+      css: {
+        display: toggle ? 'none' : 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '$spacing-03 $spacing-04'
+      },
+      children: jsx("div", {
+        ref: ref,
+        children: jsx(InputSelect, {
+          showLeadingIcon: true,
+          search: true,
+          size: "sm",
+          placeholder: placeholder,
+          option: option,
+          onChange: x => handleSelected(x),
+          onSearch: y => handleSearch(y),
+          css: {
+            '& > div > div': {
+              maxHeight: '250px',
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              }
+            }
+          }
+        }, String(toggle))
+      })
+    })]
+  });
+};
+
+export { ComparatorController as default };

package/components/chart/lineChart/components/ComparatorItem.esm.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { foundations } from '@majoo-ui/core';
+import { CloseOutline } from '@majoo-ui/icons';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import ProductList from './ProductList.esm.js';
+
+const {
+  colors
+} = foundations;
+const ComparatorItem = props => {
+  const {
+    dataKey,
+    color,
+    onCloseClick,
+    disableClose,
+    variants
+  } = props;
+  return jsxs(Flex, {
+    id: "comparator-item",
+    children: [jsxs(Box, {
+      css: {
+        display: 'flex',
+        flexDirection: 'column',
+        '@sm': {
+          padding: '$spacing-02',
+          gap: 8,
+          backgroundColor: '$white',
+          boxShadow: '$small',
+          borderRadius: '$md'
+        },
+        '@md': {
+          padding: '$spacing-03 $spacing-04',
+          gap: '$compact',
+          backgroundColor: 'none',
+          boxShadow: 'none',
+          borderRadius: 'none'
+        }
+      },
+      children: [jsxs(Box, {
+        css: {
+          display: 'flex',
+          alignItems: 'center',
+          position: 'relative',
+          gap: '$spacing-08',
+          '@md': {
+            gap: '$spacing-10'
+          }
+        },
+        children: [jsxs(Box, {
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            height: 24
+          },
+          children: [jsx(Box, {
+            css: {
+              position: 'absolute',
+              left: 4,
+              backgroundColor: color,
+              width: 12,
+              height: 12,
+              borderRadius: '50%'
+            }
+          }), jsx(Box, {
+            css: {
+              width: 80,
+              height: 4,
+              backgroundColor: color
+            }
+          })]
+        }), jsx(Box, {
+          onClick: () => onCloseClick(),
+          css: {
+            cursor: 'pointer',
+            display: disableClose ? 'none' : 'block'
+          },
+          children: jsx(CloseOutline, {
+            color: colors.textSecondary,
+            size: 24
+          })
+        })]
+      }), jsx(ProductList, {
+        name: dataKey,
+        variants: variants,
+        direction: "column",
+        css: {
+          '& > div': {
+            fontWeight: 600
+          }
+        }
+      })]
+    }), jsx(Box, {
+      id: "separator-item",
+      css: {
+        height: '100%',
+        width: 1,
+        backgroundColor: '$bgBorder'
+      }
+    })]
+  });
+};
+
+export { ComparatorItem as default };