@pocketprep/ui-kit 3.8.5 → 3.9.0

package/lib/components/Charts/Bar.vue

@@ -2,15 +2,15 @@
     <div :id="chartId" class="uikit-bar" />
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
+import './highcharts-wrap.ts'
 import Highcharts, { chart } from 'highcharts'
-import Accessibility from 'highcharts/modules/accessibility'
 import BrandColors from '../../pocketprep-export.module.scss'
+import { nextTick, onMounted } from 'vue'
 
-type TCustomChartOptions = Highcharts.Options & { 
-    plotOptions: { 
-        series: { 
+type TCustomChartOptions = Highcharts.Options & {
+    plotOptions: {
+        series: {
             groupPadding: number
             pointPadding: number
         }
@@ -21,290 +21,219 @@ type TCustomChartOptions = Highcharts.Options & {
     }
 }
 
-type TCustomSeries = Highcharts.Series & {
-    options: {
-        borderRadiusTopLeft: number
-        borderRadiusTopRight: number
-        borderRadiusBottomRight: number
-        borderRadiusBottomLeft: number
-    }
-}
-
-type TShapeArgs = {
-    d?: Highcharts.SVGPathArray
-    width?: number
-    height?: number
-    x?: number
-    y?: number
-}
-
-type TCustomPoint = Highcharts.Point & {
-    shapeArgs: TShapeArgs
-    shapeType: string
-    dlBox: TShapeArgs
-}
-
-type TCustomHighcharts = typeof Highcharts & {
-    seriesTypes: {
-        column: {
-            prototype: Record<string, unknown>
-        }
-    }
-}
-
-Accessibility(Highcharts);
-(function (H) {
-    H.wrap((H.seriesTypes.column.prototype), 'translate', function (this: TCustomSeries, proceed: () => void) {
-        const options = this.options  
-
-        proceed.call(this);
-
-        (this.points as TCustomPoint[]).forEach(function (point) {
-            if (options.borderRadiusTopLeft || options.borderRadiusTopRight) {
-                const w = Number(point.shapeArgs.width)
-                const h = Number(point.shapeArgs.height)
-                const x = Number(point.shapeArgs.x)
-                const y = Number(point.shapeArgs.y)
-                const maxR = Math.min(w, h) / 2
-
-                let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w)
-                let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w)
-
-
-                radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft
-                radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight
-
-                point.dlBox = point.shapeArgs
-
-                point.shapeType = 'path'
-                const d = [
-                    'M', x + radiusTopLeft, y,
-                    'L', x + w - radiusTopRight, y,
-                    'C', x + w - (radiusTopRight / 2), y, x + w, y + (radiusTopRight / 2), x + w, y + radiusTopRight,
-                    'L', x + w, y + h,
-                    'C', x + w, y + h, x + w, y + h, x + w, y + h,
-                    'L', x, y + h,
-                    'C', x, y + h, x, y + h, x, y + h,
-                    'L', x, y + radiusTopLeft,
-                    'C', x, y + (radiusTopLeft / 2), x + (radiusTopLeft / 2), y, x + radiusTopLeft, y,
-                    'Z',
-                ] as unknown as Highcharts.SVGPathArray
-                point.shapeArgs = {
-                    d,
-                }
-            }
-
-        })
-    })
-}(Highcharts as TCustomHighcharts))
-
-/**
- * @see [Designs for Content - Student](https://marvelapp.com/adf8ab3/screen/68221510)  
- */
-@Component
-export default class Bar extends Vue {
-    @Prop({ default: '' }) title!: string
-    @Prop() data!: Highcharts.PointOptionsObject[]
-    @Prop() formatterFunc!: 
-    Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject>
-    @Prop() type!: 'percent' | 'distribution'
-    @Prop({ default: null }) yAxisTitle!: string
-    @Prop({ default: null }) max!: number
-    @Prop({ default: false }) hideAverageLine!: boolean
-    @Prop({ default: 'normal' }) size!: 'normal' | 'small'
-    @Prop() barColor?: string
-    @Prop({ default: '' }) description!: string
-    @Prop({ default: false }) isDarkMode!: boolean
-
-    chartId = `chart${Math.round(Math.random() * 10000)}`
-
-    mounted () {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const self = this
-
-        const chartOptions: TCustomChartOptions = {
-            accessibility: {
-                description: this.description,
+const {
+    title = '',
+    data,
+    formatterFunc = null,
+    type,
+    yAxisTitle = null,
+    max = null,
+    hideAverageLine,
+    size = 'normal',
+    barColor = null,
+    description = '',
+    isDarkMode,
+} = defineProps<{
+    title?: string
+    data: Highcharts.PointOptionsObject[]
+    formatterFunc?: Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject> | null
+    type: 'percent' | 'distribution'
+    yAxisTitle?: string | null
+    max?: number | null
+    hideAverageLine?: boolean
+    size?: 'normal' | 'small'
+    barColor?: string | null
+    description?: string
+    isDarkMode?: boolean
+}>()
+
+const chartId = `chart${Math.round(Math.random() * 10000)}`
+
+onMounted(() => {
+    const chartOptions: TCustomChartOptions = {
+        accessibility: {
+            description: description,
+        },
+        tooltip: {
+            formatter: function () {
+                return String(this.y)
             },
-            tooltip: {
-                formatter: function () {
-                    return String(this.y)
+        },
+        legend: {
+            enabled: false,
+        },
+        credits: {
+            enabled: false,
+        },
+        chart: {
+            type: 'column',
+            spacingLeft: 0,
+            spacingRight: 0,
+            spacingBottom: 6,
+            backgroundColor: 'transparent',
+        },
+        title: {
+            text: title,
+            align: 'left',
+            style: {
+                color: !isDarkMode ? BrandColors.brandBlack : BrandColors.fog,
+            },
+        },
+        xAxis: {
+            tickLength: 0,
+            type: 'category',
+        },
+        yAxis: {
+            min: 0,
+            max: max,
+            opposite: true,
+            labels: {
+                formatter: formatterFunc || function () {
+                    return String(this.value)
                 },
             },
-            legend: {
-                enabled: false,
+            title: {
+                text: yAxisTitle,
             },
-            credits: {
-                enabled: false,
+        },
+        colors: [
+            barColor
+                ? barColor || ''
+                : isDarkMode
+                    ? BrandColors.grayBackground || ''
+                    : BrandColors.brandBlack || '',
+        ],
+        plotOptions: {
+            series: {
+                groupPadding: 0.1,
+                pointPadding: 0,
             },
-            chart: {
-                type: 'column',
-                spacingLeft: 0,
-                spacingRight: 0,
-                spacingBottom: 6,
-                backgroundColor: 'transparent',
+            column: {
+                minPointLength: 3,
+                maxPointWidth: 100,
+                borderWidth: 0,
+                borderRadiusTopLeft: 3,
+                borderRadiusTopRight: 3,
             },
-            title: {
-                text: this.title,
-                align: 'left',
-                style: {
-                    color: !this.isDarkMode ? BrandColors.brandBlack : BrandColors.fog,
+        },
+        series: [
+            {
+                type: 'column',
+                data: data,
+                borderColor: barColor
+                    ? barColor
+                    : isDarkMode
+                        ? BrandColors.grayBackground
+                        : BrandColors.brandBlack,
+                states: {
+                    hover: {
+                        borderColor: BrandColors.bananaBread,
+                        color: BrandColors.bananaBread,
+                    },
                 },
             },
-            xAxis: {
-                tickLength: 0,
-                type: 'category',
+        ],
+    }
+
+    if (type === 'percent') {
+        chartOptions.tooltip = {
+            useHTML: true,
+            borderWidth: 0,
+            padding: 0,
+            borderRadius: 12,
+            backgroundColor: 'rgba(28, 47, 60, 0.95)',
+            shadow: false,
+            style: {
+                fontFamily: '\'Avenir Next\', \'Muli\', sans-serif',
             },
-            yAxis: {
-                min: 0,
-                max: this.max,
-                opposite: true,
-                labels: {
-                    formatter: this.formatterFunc || function () {
-                        return String(this.value)
-                    },
-                },
-                title: {
-                    text: this.yAxisTitle,
-                },
+            formatter: function () {
+                const customInfo = (this.point as unknown as { info: string }).info
+                return `
+                    <div class="uikit-bar__tooltip">
+                        <div class="uikit-bar__tooltip-percent">${this.y}%</div>
+                        ${customInfo ? `<div class="uikit-bar__tooltip-date">${customInfo}</div>` : ''}
+                    </div>
+                    `
             },
-            colors: [ 
-                this.barColor 
-                    ? this.barColor || ''
-                    : this.isDarkMode 
-                        ? BrandColors.grayBackground || ''
-                        : BrandColors.brandBlack || '',
-            ],
-            plotOptions: {
-                series: {
-                    groupPadding: 0.1,
-                    pointPadding: 0,
-                },
-                column: {
-                    minPointLength: 3,
-                    maxPointWidth: 100,
-                    borderWidth: 0,
-                    borderRadiusTopLeft: 3,
-                    borderRadiusTopRight: 3,
-                },
+        }
+        chartOptions.xAxis = {
+            tickLength: 0,
+            lineColor: !isDarkMode ? BrandColors.fog : BrandColors.ash,
+            labels: {
+                enabled: false,
             },
-            series: [
-                {
-                    type: 'column',
-                    data: this.data,
-                    borderColor: this.barColor 
-                        ? this.barColor 
-                        : this.isDarkMode 
-                            ? BrandColors.grayBackground
-                            : BrandColors.brandBlack,
-                    states: {
-                        hover: {
-                            borderColor: BrandColors.bananaBread,
-                            color: BrandColors.bananaBread,
-                        },
-                    },
-                },
-            ],
         }
-
-        if (this.type === 'percent') {
-            chartOptions.tooltip = {
-                useHTML: true,
-                borderWidth: 0,
-                padding: 0,
-                borderRadius: 12,
-                backgroundColor: 'rgba(28, 47, 60, 0.95)',
-                shadow: false,
-                style: {
-                    fontFamily: '\'Avenir Next\', \'Muli\', sans-serif',
-                },
-                formatter: function () {
-                    const customInfo = (this.point as unknown as { info: string }).info
-                    return `
-                        <div class="uikit-bar__tooltip">
-                            <div class="uikit-bar__tooltip-percent">${this.y}%</div>
-                            ${customInfo ? `<div class="uikit-bar__tooltip-date">${customInfo}</div>` : ''}
-                        </div>
-                        `
-                },
-            }
-            chartOptions.xAxis = { 
-                tickLength: 0,
-                lineColor: !this.isDarkMode ? BrandColors.fog : BrandColors.ash,
-                labels: {
-                    enabled: false, 
-                },
-            }
-            chartOptions.yAxis = {
-                min: 0,
-                max: 100,
-                opposite: true,
-                gridLineColor: !this.isDarkMode ? BrandColors.fog : BrandColors.ash,
-                plotLines: (this.data.length > 1 && !this.hideAverageLine) ? [
+        chartOptions.yAxis = {
+            min: 0,
+            max: 100,
+            opposite: true,
+            gridLineColor: !isDarkMode ? BrandColors.fog : BrandColors.ash,
+            plotLines: (data.length > 1 && !hideAverageLine)
+                ? [
                     {
                         dashStyle: 'Dash',
                         value: Math.round(
-                            (this.data.reduce((accum, data) => accum + Number(data.y), 0) / this.data.length)
+                            (data.reduce((accum, d) => accum + Number(d.y), 0) / data.length)
                         ),
                         width: 2,
                         zIndex: 5,
                         color: BrandColors.electricViolet,
                     },
-                ] : [],
-                labels: {
-                    useHTML: true,
-                    y: 4,
-                    style: {
-                        textAlign: 'right',
-                        color: this.isDarkMode ? 'rgba(255, 255, 255, 0.85)' : BrandColors.ash,
-                    },
-                    formatter: this.formatterFunc || function () {
-                        if (this.value === 0) {
-                            return `${String(this.value)}%`
-                        }
-                        return `
-                            <div>${String(this.value)}%</div>
-                            <div class="
-                                uikit-bar__label-circle 
-                                ${self.getScoreColor(Number(this.value))}
-                            " />
-                        `
-                    },
+                ]
+                : [],
+            labels: {
+                useHTML: true,
+                y: 4,
+                style: {
+                    textAlign: 'right',
+                    color: isDarkMode ? 'rgba(255, 255, 255, 0.85)' : BrandColors.ash,
                 },
-                tickPositions: [ 0, 50, 75, 100 ],
-                title: {
-                    text: null,
+                formatter: formatterFunc || function () {
+                    if (this.value === 0) {
+                        return `${String(this.value)}%`
+                    }
+                    return `
+                        <div>${String(this.value)}%</div>
+                        <div class="
+                            uikit-bar__label-circle 
+                            ${getScoreColor(Number(this.value))}
+                        " />
+                    `
                 },
-            }
+            },
+            tickPositions: [ 0, 50, 75, 100 ],
+            title: {
+                text: null,
+            },
         }
+    }
 
-        if (this.size === 'small') {
-            chartOptions.plotOptions.column = {
-                minPointLength: 3,
-                maxPointWidth: 100,
-                borderRadiusTopLeft: 8,
-                borderRadiusTopRight: 8,
-            }
-            chartOptions.yAxis = {
-                ...(chartOptions.yAxis  as Highcharts.YAxisOptions || {}),
-                labels: {
-                    ...((chartOptions.yAxis as Highcharts.YAxisOptions)?.labels),
-                    formatter: function () {
-                        return `${String(this.value)}%`
-                    },
+    if (size === 'small') {
+        chartOptions.plotOptions.column = {
+            minPointLength: 3,
+            maxPointWidth: 100,
+            borderRadiusTopLeft: 8,
+            borderRadiusTopRight: 8,
+        }
+        chartOptions.yAxis = {
+            ...(chartOptions.yAxis as Highcharts.YAxisOptions || {}),
+            labels: {
+                ...((chartOptions.yAxis as Highcharts.YAxisOptions)?.labels),
+                formatter: function () {
+                    return `${String(this.value)}%`
                 },
-            }
+            },
         }
-
-        const renderedChart = chart(this.chartId, chartOptions)
-        this.$nextTick(() => {
-            renderedChart.reflow()
-        })
     }
 
-    getScoreColor (score: number) {
-        return score <= 50 ? 'red' : score < 75 ? 'yellow' : 'green' 
-    }
+    const renderedChart = chart(chartId, chartOptions)
+    nextTick(() => {
+        renderedChart.reflow()
+    })
+})
+
+const getScoreColor = (score: number) => {
+    return score <= 50 ? 'red' : score < 75 ? 'yellow' : 'green'
 }
 </script>
 
@@ -361,4 +290,4 @@ export default class Bar extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Charts/Pie.vue

@@ -2,77 +2,71 @@
     <div :id="chartId" class="uikit-pie" />
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { nextTick, onMounted } from 'vue'
 import Highcharts, { chart } from 'highcharts'
 import BrandColors from '../../pocketprep-export.module.scss'
 
-@Component
-export default class Pie extends Vue {
-    @Prop({ default: '' }) title!: string
-    @Prop() data!: Highcharts.PointOptionsObject[]
-    @Prop() formatterFunc!: 
-    Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject>
-    @Prop() type!: 'percent' | 'distribution'
-    @Prop({ default: null }) yAxisTitle!: string
-    @Prop({ default: null }) max!: number
-    @Prop({ default: 'normal' }) size!: 'normal' | 'small'
+const {
+    data,
+} = defineProps<{
+    data: Highcharts.PointOptionsObject[]
+}>()
 
-    chartId = `chart${Math.round(Math.random() * 10000)}`
+const chartId = `chart${Math.round(Math.random() * 10000)}`
 
-    mounted () {
-        const chartOptions: Highcharts.Options = {
-            chart: {
-                plotShadow: false,
-                type: 'pie',
-                margin: [ 0, 0, 0, 0 ],
-                spacing: [ 0, 0, 0, 0 ],
-            },
-            title: undefined,
-            tooltip: {
-                enabled: false,
-            },
-            plotOptions: {
-                pie: {
-                    slicedOffset: 0,
-                    allowPointSelect: false,
-                    size: '100%',
-                    dataLabels: {
-                        enabled: false,
+onMounted(() => {
+    const chartOptions: Highcharts.Options = {
+        chart: {
+            plotShadow: false,
+            type: 'pie',
+            margin: [ 0, 0, 0, 0 ],
+            spacing: [ 0, 0, 0, 0 ],
+        },
+        title: undefined,
+        tooltip: {
+            enabled: false,
+        },
+        plotOptions: {
+            pie: {
+                slicedOffset: 0,
+                allowPointSelect: false,
+                size: '100%',
+                dataLabels: {
+                    enabled: false,
+                },
+                states: {
+                    inactive: {
+                        opacity: 1,
                     },
-                    states: {
-                        inactive: {
-                            opacity: 1,
-                        },
-                        hover: {
-                            enabled: false,
-                        },
+                    hover: {
+                        enabled: false,
                     },
                 },
-                series: {
-                    color: BrandColors.brandBlue,
-                    borderWidth: 3,
-                },
             },
-            series: [{
-                colors: [
-                    BrandColors.green || '',
-                    BrandColors.butterscotch || '',
-                    BrandColors.electricViolet || '',
-                    BrandColors.brandBlue || '',
-                ],
-                type: 'pie',
-                data: this.data,
-            }],
-        }
+            series: {
+                color: BrandColors.brandBlue,
+                borderWidth: 3,
+            },
+        },
+        series: [{
+            colors: [
+                BrandColors.green || '',
+                BrandColors.butterscotch || '',
+                BrandColors.electricViolet || '',
+                BrandColors.brandBlue || '',
+            ],
+            type: 'pie',
+            data: data,
+        }],
+    }
 
-        const pieChart = chart(this.chartId, chartOptions)
+    const pieChart = chart(chartId, chartOptions)
 
-        this.$nextTick(() => {
-            pieChart.reflow()
-        })
-    }
-}
+    nextTick(() => {
+        pieChart.reflow()
+    })
+})
 </script>
 
 <style lang="scss">
@@ -102,4 +96,4 @@ export default class Pie extends Vue {
         display: none;
     }
 }
-</style>
+</style>