├── src
├── index.css
├── vite-env.d.ts
├── main.tsx
├── App.css
├── App.tsx
└── assets
│ └── react.svg
├── vite.config.ts
├── tsconfig.node.json
├── index.html
├── tsconfig.json
├── package.json
└── public
└── vite.svg
/src/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.tsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "noEmit": true,
14 | "jsx": "react-jsx",
15 |
16 | /* Linting */
17 | "strict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noFallthroughCasesInSwitch": true
21 | },
22 | "include": ["src"],
23 | "references": [{ "path": "./tsconfig.node.json" }]
24 | }
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-charts",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "apexcharts": "^3.40.0",
14 | "react": "^18.2.0",
15 | "react-apexcharts": "^1.4.0",
16 | "react-dom": "^18.2.0"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.0.28",
20 | "@types/react-dom": "^18.0.11",
21 | "@typescript-eslint/eslint-plugin": "^5.57.1",
22 | "@typescript-eslint/parser": "^5.57.1",
23 | "@vitejs/plugin-react": "^4.0.0",
24 | "eslint": "^8.38.0",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.3.4",
27 | "typescript": "^5.0.2",
28 | "vite": "^4.3.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-label: #a7a7a7;
3 | --color-text: #f9f9f9;
4 | --font-family: 'Euclid Circular A';
5 | }
6 |
7 | body {
8 | margin: 0;
9 | display: grid;
10 | place-items: center;
11 | color: var(--color-text);
12 | font-family: var(--font-family);
13 | }
14 |
15 | body,
16 | html {
17 | height: 100%;
18 | }
19 |
20 | header {
21 | display: flex;
22 | align-items: center;
23 | justify-content: space-between;
24 | padding: 30px 20px 30px 30px;
25 | }
26 |
27 | header nav {
28 | display: flex;
29 | }
30 |
31 | header button {
32 | background: transparent;
33 | border: 0;
34 | padding: 0;
35 | width: 70px;
36 | color: inherit;
37 | font-family: inherit;
38 | cursor: pointer;
39 | }
40 |
41 | header button.active {
42 | background: #13ae94;
43 | color: #f9f9f9;
44 | border-radius: 3px;
45 | padding: 8px 12px;
46 | }
47 |
48 | h2 {
49 | font-weight: 400;
50 | font-size: 22px;
51 | margin: 0;
52 | }
53 |
54 | .card {
55 | position: relative;
56 | background: #1b1d1c;
57 | width: 360px;
58 | border-radius: 10px;
59 | box-shadow: 0 50px 100px rgba(0, 0, 0, 0.08);
60 | }
61 |
62 | .chart {
63 | height: 160px;
64 | }
65 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import ApexChart from 'react-apexcharts';
3 | import './App.css';
4 |
5 | const colorPrimary = '#13ae94';
6 | const colorDefault = '#e1e4f2';
7 |
8 | const defaultOptions = {
9 | chart: {
10 | toolbar: {
11 | show: false,
12 | },
13 | animations: {
14 | enabled: true,
15 | easing: 'easeinout',
16 | speed: 750,
17 | dynamicAnimation: {
18 | enabled: true,
19 | speed: 350,
20 | },
21 | },
22 | },
23 | stroke: {
24 | lineCap: 'round',
25 | },
26 | dataLabels: {
27 | enabled: false,
28 | },
29 | legend: {
30 | show: false,
31 | },
32 | states: {
33 | hover: {
34 | filter: {
35 | type: 'none',
36 | },
37 | },
38 | },
39 | fill: {
40 | type: 'gradient',
41 | gradient: {
42 | shade: 'light',
43 | type: 'vertical',
44 | opacityFrom: 0.4,
45 | opacityTo: 0,
46 | shadeIntensity: 0.2,
47 | },
48 | },
49 | };
50 |
51 | const options = {
52 | ...defaultOptions,
53 | chart: {
54 | ...defaultOptions.chart,
55 | type: 'bar',
56 | },
57 | colors: [colorPrimary, colorDefault],
58 | grid: {
59 | borderColor: 'rgba(255, 255, 255, 0.08)',
60 | padding: { left: -10, right: 0, top: -16, bottom: -8 },
61 | xaxis: {
62 | lines: {
63 | show: true,
64 | },
65 | },
66 | yaxis: {
67 | lines: {
68 | show: false,
69 | },
70 | },
71 | },
72 | yaxis: {
73 | labels: {
74 | show: false,
75 | },
76 | },
77 | xaxis: {
78 | labels: {
79 | show: false,
80 | },
81 | axisBorder: {
82 | show: false,
83 | },
84 | axisTicks: {
85 | show: false,
86 | },
87 | crosshairs: {
88 | show: false,
89 | },
90 | categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
91 | },
92 | };
93 |
94 | const daily = [
95 | {
96 | name: 'This Year',
97 | data: [34, 55, 41, 74, 30, 58],
98 | },
99 | ];
100 |
101 | const weekly = [
102 | {
103 | name: 'This Year',
104 | data: [55, 41, 74, 30, 58],
105 | },
106 | ];
107 |
108 | const buttons = ['Daily', 'Weekly'];
109 |
110 | const ToggleButtons = ({
111 | setSeries,
112 | setActiveButton,
113 | activeButton,
114 | }) => {
115 | const handleClick = stat => {
116 | if (stat === 'Daily') {
117 | setSeries(daily);
118 | } else {
119 | setSeries(weekly);
120 | }
121 | setActiveButton(stat);
122 | };
123 |
124 | return (
125 |
135 | );
136 | };
137 |
138 | function App() {
139 | const [series, setSeries] = useState(daily);
140 | const [activeButton, setActiveButton] = useState('Daily');
141 |
142 | return (
143 |
144 |
145 | Followers
146 |
151 |
152 |
161 |