Chunxian Zhang
2 年之前
共有 7 個檔案被更改，包括 348 行新增 和 52 行删除
分割檢視
Diff Options
-
+17 -15lazy-timer-be/app.py
-
+113 -0lazy-timer-fe/package-lock.json
-
+2 -0lazy-timer-fe/package.json
-
+1 -1lazy-timer-fe/src/App.js
-
+213 -32lazy-timer-fe/src/pages/Charts/Bar.jsx
-
+0 -3lazy-timer-fe/src/pages/Ecommerce.jsx
-
+2 -1lazy-timer-fe/src/pages/Orders.jsx
+ 17
- 15
lazy-timer-be/app.py
查看文件
+ 113
- 0
lazy-timer-fe/package-lock.json
查看文件
+ 2
- 0
lazy-timer-fe/package.json
查看文件
+ 1
- 1
lazy-timer-fe/src/App.js
查看文件
+ 213
- 32
lazy-timer-fe/src/pages/Charts/Bar.jsx
查看文件
| @ -1,35 +1,216 @@ | |||
| import React from 'react'; | |||
| import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts'; | |||
| import React, { useEffect, useState } from 'react' | |||
| import ReactECharts from 'echarts-for-react' | |||
| import moment from 'moment' | |||
| import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts' | |||
| import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy'; | |||
| import { ChartsHeader } from '../../components'; | |||
| import { useStateContext } from '../../contexts/ContextProvider'; | |||
| import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy' | |||
| import { ChartsHeader } from '../../components' | |||
| import { useStateContext } from '../../contexts/ContextProvider' | |||
| import { getDayScreenUseTime } from '../../service/getDayScreenUseTime/index' | |||
| const Bar = () => { | |||
| const { currentMode } = useStateContext(); | |||
| return ( | |||
| <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl"> | |||
| <ChartsHeader category="Bar" title="Olympic Medal Counts - RIO" /> | |||
| <div className=" w-full"> | |||
| <ChartComponent | |||
| id="charts" | |||
| primaryXAxis={barPrimaryXAxis} | |||
| primaryYAxis={barPrimaryYAxis} | |||
| chartArea={{ border: { width: 0 } }} | |||
| tooltip={{ enable: true }} | |||
| background={currentMode === 'Dark' ? '#33373E' : '#fff'} | |||
| legendSettings={{ background: 'white' }} | |||
| > | |||
| <Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} /> | |||
| <SeriesCollectionDirective> | |||
| {/* eslint-disable-next-line react/jsx-props-no-spreading */} | |||
| {barCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)} | |||
| </SeriesCollectionDirective> | |||
| </ChartComponent> | |||
| </div> | |||
| </div> | |||
| ); | |||
| }; | |||
| export default Bar; | |||
| const { currentColor, currentMode } = useStateContext() | |||
| let [option, setOption] = useState({}) | |||
| /* 生成本周日期, 格式为 MM-DD */ | |||
| function convertDate(date) { | |||
| // 格式化日期 | |||
| var yyyy = date.getFullYear().toString() | |||
| var mm = (date.getMonth() + 1).toString() | |||
| var dd = date.getDate().toString() | |||
| var mmChars = mm.split('') | |||
| var ddChars = dd.split('') | |||
| return (mmChars[1] ? mm : '0' + mmChars[0]) + '-' + (ddChars[1] ? dd : '0' + ddChars[0]) | |||
| } | |||
| let currentWeekDates = new Array(7) | |||
| for (let i = 0; i < 7; i++) { | |||
| const curr = new Date() | |||
| currentWeekDates[i] = convertDate(new Date(curr.setDate(curr.getDate() - curr.getDay() + i))) | |||
| } | |||
| let currentWeekScreenTime = new Array(7) | |||
| useEffect(async () => { | |||
| for (let i = 0; i < 7; i++) { | |||
| let receivedJson = await getDayScreenUseTime('2022-' + currentWeekDates[i]) | |||
| currentWeekScreenTime[i] = receivedJson.data.getDayScreenUseTimeH * 3600 + receivedJson.data.getDayScreenUseTimeM * 60 + receivedJson.data.getDayScreenUseTimeS | |||
| } | |||
| setOption({ | |||
| backgroundColor: '#031245', | |||
| color: ['#63caff', '#49beff', '#03387a', '#03387a', '#03387a', '#6c93ee', '#a9abff', '#f7a23f', '#27bae7', '#ff6d9d', '#cb79ff', '#f95b5a', '#ccaf27', '#38b99c', '#93d0ff', '#bd74e0', '#fd77da', '#dea700'], | |||
| grid: { | |||
| containLabel: true, | |||
| left: 20, | |||
| right: 20, | |||
| bottom: 10, | |||
| top: 40 | |||
| }, | |||
| xAxis: { | |||
| axisLabel: { | |||
| color: '#c0c3cd', | |||
| fontSize: 14, | |||
| interval: 0 | |||
| }, | |||
| axisTick: { | |||
| lineStyle: { | |||
| color: '#384267' | |||
| }, | |||
| show: true | |||
| }, | |||
| splitLine: { | |||
| show: false | |||
| }, | |||
| axisLine: { | |||
| lineStyle: { | |||
| color: '#384267', | |||
| width: 1, | |||
| type: 'dashed' | |||
| }, | |||
| show: true | |||
| }, | |||
| data: [currentWeekDates[0] + ' 周一', currentWeekDates[1] + ' 周二', currentWeekDates[2] + ' 周三', currentWeekDates[3] + ' 周四', currentWeekDates[4] + ' 周五', currentWeekDates[5] + ' 周六', currentWeekDates[6] + ' 周日'].map(function (str) { | |||
| return str.replace(' ', '\n') | |||
| }), | |||
| type: 'category' | |||
| }, | |||
| yAxis: { | |||
| axisLabel: { | |||
| color: '#c0c3cd', | |||
| fontSize: 14, | |||
| formatter: (value, index, format) => { | |||
| return Math.floor(value / 3600) + '小时' | |||
| } | |||
| }, | |||
| max: 86400, | |||
| axisTick: { | |||
| lineStyle: { | |||
| color: '#384267', | |||
| width: 1 | |||
| }, | |||
| show: true | |||
| }, | |||
| splitLine: { | |||
| show: true, | |||
| lineStyle: { | |||
| color: '#384267', | |||
| type: 'dashed' | |||
| } | |||
| }, | |||
| axisLine: { | |||
| lineStyle: { | |||
| color: '#384267', | |||
| width: 1, | |||
| type: 'dashed' | |||
| }, | |||
| show: true | |||
| }, | |||
| name: '' | |||
| }, | |||
| series: [ | |||
| { | |||
| data: currentWeekScreenTime, // 实际值 | |||
| type: 'bar', | |||
| barMaxWidth: 'auto', | |||
| barWidth: 30, | |||
| itemStyle: { | |||
| color: { | |||
| x: 0, | |||
| y: 0, | |||
| x2: 0, | |||
| y2: 1, | |||
| type: 'linear', | |||
| global: false, | |||
| colorStops: [ | |||
| { | |||
| offset: 0, | |||
| color: '#0b9eff' | |||
| }, | |||
| { | |||
| offset: 1, | |||
| color: '#63caff' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| // label: { | |||
| // show: false, | |||
| // position: 'top', | |||
| // distance: 10, | |||
| // color: '#fff', | |||
| // formatter: '{c}' | |||
| // } | |||
| }, | |||
| { | |||
| data: [1, 1, 1, 1, 1, 1, 1, 1], | |||
| type: 'pictorialBar', | |||
| barMaxWidth: '20', | |||
| symbol: 'diamond', | |||
| symbolOffset: [0, '50%'], | |||
| symbolSize: [30, 15] | |||
| }, | |||
| { | |||
| data: currentWeekScreenTime, | |||
| type: 'pictorialBar', | |||
| barMaxWidth: '20', | |||
| symbolPosition: 'end', | |||
| symbol: 'diamond', | |||
| symbolOffset: [0, '-50%'], | |||
| symbolSize: [30, 12], | |||
| zlevel: 2 | |||
| }, | |||
| { | |||
| data: [86400, 86400, 86400, 86400, 86400, 86400, 86400, 86400], | |||
| type: 'bar', | |||
| barMaxWidth: 'auto', | |||
| barWidth: 30, | |||
| barGap: '-100%', | |||
| zlevel: -1 | |||
| }, | |||
| { | |||
| data: [1, 1, 1, 1, 1, 1, 1, 1], | |||
| type: 'pictorialBar', | |||
| barMaxWidth: '20', | |||
| symbol: 'diamond', | |||
| symbolOffset: [0, '50%'], | |||
| symbolSize: [30, 15], | |||
| zlevel: -2 | |||
| }, | |||
| { | |||
| data: [86400, 86400, 86400, 86400, 86400, 86400, 86400, 86400], | |||
| type: 'pictorialBar', | |||
| barMaxWidth: '20', | |||
| symbolPosition: 'end', | |||
| symbol: 'diamond', | |||
| symbolOffset: [0, '-50%'], | |||
| symbolSize: [30, 12], | |||
| zlevel: -1 | |||
| } | |||
| ], | |||
| tooltip: { | |||
| trigger: 'axis', | |||
| show: true, | |||
| axisPointer: { | |||
| type: 'shadow' | |||
| }, | |||
| formatter: function(params) { | |||
| let sum = params[0]['data'] | |||
| return Math.floor((sum / 3600)) + '小时' + Math.floor((sum % 3600 / 60)) + '分钟' + Math.floor((sum % 60)) + '秒' | |||
| } | |||
| } | |||
| }) | |||
| }) | |||
| return ( | |||
| <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl"> | |||
| <ChartsHeader category="Bar" title="屏幕使用时间" /> | |||
| <div className=" w-full"> | |||
| <ReactECharts option={option} style={{ height: '600px' }}></ReactECharts> | |||
| </div> | |||
| </div> | |||
| ) | |||
| } | |||
| export default Bar | |||