self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 08:48:45 +02:00
Code Issues Actions 5 Releases Activity

Merge pull request #2868 from chakflying/update-chartjs

Browse Source 
Chore: Update chart.js & improve performance
This commit is contained in:
Louis Lam 2023-04-11 19:01:47 +08:00 committed by GitHub
commit 680dccefea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15459 additions and 857 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16297
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -143,8 +143,8 @@
"aedes": "^0.46.3",
"babel-plugin-rewire": "~1.2.0",
"bootstrap": "5.1.3",
"chart.js": "~3.6.2",
"chartjs-adapter-dayjs": "~1.0.0",
"chart.js": "~4.2.1",
"chartjs-adapter-dayjs-4": "~1.0.4",
"concurrently": "^7.1.0",
"core-js": "~3.26.1",
"cronstrue": "~2.24.0",
@ -175,7 +175,7 @@
"vite": "~3.1.0",
"vite-plugin-compression": "^0.5.1",
"vue": "~3.2.47",
"vue-chart-3": "3.0.9",
"vue-chartjs": "~5.2.0",
"vue-confirm-dialog": "~1.0.2",
"vue-contenteditable": "~3.0.4",
"vue-i18n": "~9.2.2",

13
src/components/PingChart.vue
View File

@ -11,16 +11,16 @@
</ul>
</div>
<div class="chart-wrapper" :class="{ loading : loading}">
<LineChart :chart-data="chartData" :options="chartOptions" />
<Line :data="chartData" :options="chartOptions" />
</div>
</div>
</template>
<script lang="js">
import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
import "chartjs-adapter-dayjs";
import "chartjs-adapter-dayjs-4";
import dayjs from "dayjs";
import { LineChart } from "vue-chart-3";
import { Line } from "vue-chartjs";
import { useToast } from "vue-toastification";
import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
@ -29,7 +29,7 @@ const toast = useToast();
Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
export default {
components: { LineChart },
components: { Line },
props: {
/** ID of monitor */
monitorId: {
@ -104,8 +104,10 @@ export default {
}
},
ticks: {
sampleSize: 3,
maxRotation: 0,
autoSkipPadding: 30,
padding: 3,
},
grid: {
color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
@ -197,6 +199,7 @@ export default {
borderColor: "#5CDD8B",
backgroundColor: "#5CDD8B38",
yAxisID: "y",
label: "ping",
},
{
// Bar Chart
@ -208,6 +211,8 @@ export default {
barThickness: "flex",
barPercentage: 1,
categoryPercentage: 1,
inflateAmount: 0.05,
label: "status",
},
],
};