die

src/components/Charts/SparkLine.jsx

@@ -5,24 +5,36 @@ import {
  SparklineTooltip,
 } from "@syncfusion/ej2-react-charts";
 
-const SparkLine = ({ currentColor, data, id, height, width, color, type }) => {
- return (
- <SparklineComponent
- id={id}
- height={height}
- width={width}
- lineWidth={1}
- valueType="Numeric"
- fill={color}
- border={{ color: currentColor, width: 2 }}
- dataSource={data}
- xName="x"
- yName="y"
- type={type}
- >
- <Inject services={[SparklineTooltip]} />
- </SparklineComponent>
- );
-};
+class SparkLine extends React.PureComponent {
+ render() {
+ const { id, height, width, color, data, type, currentColor } = this.props;
+
+ return (
+ <SparklineComponent
+ id={id}
+ height={height}
+ width={width}
+ lineWidth={1}
+ valueType="Numeric"
+ fill={color}
+ border={{ color: currentColor, width: 2 }}
+ tooltipSettings={{
+ visible: true,
+ format: "${x} : data ${yval}",
+ trackLineSettings: {
+ visible: true,
+ },
+ }}
+ markerSettings={{ visible: ["All"], size: 2.5, fill: currentColor }}
+ dataSource={data}
+ xName="x"
+ yName="yval"
+ type={type}
+ >
+ <Inject services={[SparklineTooltip]} />
+ </SparklineComponent>
+ );
+ }
+}
 
 export default SparkLine;

src/components/Charts/Stacked.jsx

@@ -1,7 +1,41 @@
 import React from "react";
+import {
+ ChartComponent,
+ SeriesCollectionDirective,
+ SeriesDirective,
+ Inject,
+ Legend,
+ Category,
+ StackingColumnSeries,
+ Tooltip,
+} from "@syncfusion/ej2-react-charts";
 
-const Stacked = () => {
- return <div>Stacked</div>;
+import {
+ stackedCustomSeries,
+ stackedPrimaryXAxis,
+ stackedPrimaryYAxis,
+} from "../../data/dummy";
+
+const Stacked = ({ width, height }) => {
+ return (
+ <ChartComponent
+ width={width}
+ height={height}
+ id="charts"
+ primaryXAxis={stackedPrimaryXAxis}
+ primaryYAxis={stackedPrimaryYAxis}
+ chartArea={{ border: { width: 0 } }}
+ tooltip={{ enable: true }}
+ legendSettings={{ background: "white" }}
+ >
+ <Inject services={[Legend, Category, StackingColumnSeries, Tooltip]} />
+ <SeriesCollectionDirective>
+ {stackedCustomSeries.map((item, index) => (
+ <SeriesDirective key={index} {...item} />
+ ))}
+ </SeriesCollectionDirective>
+ </ChartComponent>
+ );
 };
 
 export default Stacked;

src/data/dummy.js

@@ -3035,42 +3035,42 @@ export const ecomPieChartData = [
 
 export const stackedChartData = [
  [
- { x: "Jan", y: 111.1 },
- { x: "Feb", y: 127.3 },
- { x: "Mar", y: 143.4 },
- { x: "Apr", y: 159.9 },
- { x: "May", y: 159.9 },
- { x: "Jun", y: 159.9 },
- { x: "July", y: 159.9 },
+ { x: "Jan", y: 198.1 },
+ { x: "Feb", y: 150.3 },
+ { x: "Mar", y: 201.4 },
+ { x: "Apr", y: 167.7 },
+ { x: "May", y: 188.5 },
+ { x: "Jun", y: 137.4 },
+ { x: "July", y: 190.9 },
  ],
+
  [
- { x: "Jan", y: 111.1 },
- { x: "Feb", y: 127.3 },
- { x: "Mar", y: 143.4 },
- { x: "Apr", y: 159.9 },
- { x: "May", y: 159.9 },
- { x: "Jun", y: 159.9 },
- { x: "July", y: 159.9 },
+ { x: "Jan", y: 81.1 },
+ { x: "Feb", y: 97.3 },
+ { x: "Mar", y: 123.4 },
+ { x: "Apr", y: 109.9 },
+ { x: "May", y: 148.9 },
+ { x: "Jun", y: 169.9 },
+ { x: "July", y: 59.9 },
  ],
 ];
 
 export const stackedCustomSeries = [
  {
- dataSource: stackedChartData[0],
+ dataSource: stackedChartData[1],
  xName: "x",
  yName: "y",
- name: "Budget",
+ name: "Expense",
  type: "StackingColumn",
- background: "blue",
+ background: "red",
  },
-
  {
- dataSource: stackedChartData[1],
+ dataSource: stackedChartData[0],
  xName: "x",
  yName: "y",
- name: "Expense",
+ name: "Budget",
  type: "StackingColumn",
- background: "red",
+ background: "green",
  },
 ];
 
@@ -3087,7 +3087,7 @@ export const stackedPrimaryXAxis = {
 
 export const stackedPrimaryYAxis = {
  lineStyle: { width: 0 },
- minimum: 100,
+ minimum: 0,
  maximum: 400,
  interval: 100,
  majorTickLines: { width: 0 },

src/pages/Ecommerce.jsx

@@ -114,6 +114,18 @@ const Ecommerce = () => {
  color="blue"
  />
  </div>
+ <div className="mt-10">
+ <Button
+ color="white"
+ bgColor="blue"
+ text="Download Report"
+ borderRadius="10px"
+ />
+ </div>
+ </div>
+
+ <div>
+ <Stacked width="320px" height="360px" />
  </div>
  </div>
  </div>