cardamon 0.0.1

Cardamon is a tool to help development teams measure the power consumption and carbon emissions of their software.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<template>
  <Line :data="chartData" :options="computedChartOptions" />
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  type ChartData,
  type ChartOptions
} from 'chart.js'
import { useThemeStore } from '@/stores/theme'

ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale)

interface ChartProps {
  chartData: ChartData<'line'>
  chartOptions: ChartOptions<'line'>
}

const props = defineProps<ChartProps>()

const themeStore = useThemeStore()
const darkMode = computed(() => themeStore.darkMode)

const computedChartOptions = computed(() => {
  const baseOptions: ChartOptions<'line'> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: 'top',
        labels: {
          color: darkMode.value ? 'white' : 'black' // Adjust legend text color
        }
      },
      tooltip: {
        enabled: true,
        backgroundColor: darkMode.value ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)', // Adjust tooltip background color
        titleColor: darkMode.value ? 'black' : 'white', // Adjust tooltip title color
        bodyColor: darkMode.value ? 'black' : 'white' // Adjust tooltip body color
      },
      title: {
        display: true,
        text: 'Line Chart',
        color: darkMode.value ? 'white' : 'black' // Adjust title color
      }
    },
    scales: {
      x: {
        ticks: {
          color: darkMode.value ? 'white' : 'black' // Adjust x-axis tick color
        },
        grid: {
          color: darkMode.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' // Adjust x-axis grid color
        }
      },
      y: {
        ticks: {
          color: darkMode.value ? 'white' : 'black' // Adjust y-axis tick color
        },
        grid: {
          color: darkMode.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' // Adjust y-axis grid color
        }
      }
    },
    interaction: {
      mode: 'nearest',
      axis: 'x',
      intersect: false
    }
  }

  return {
    ...props.chartOptions,
    ...baseOptions
  }
})
</script>