mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 03:42:27 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
73 lines
2.0 KiB
Plaintext
73 lines
2.0 KiB
Plaintext
---
|
|
import CaptureScript from '../components/CaptureScript.astro'
|
|
|
|
interface Props {
|
|
id?: string
|
|
height?: number
|
|
class?: string
|
|
title?: string
|
|
value?: number
|
|
}
|
|
|
|
const { id = 'active-users-4', height = 350, class: className = '', title = 'Active users', value = 58 }: Props = Astro.props
|
|
|
|
const chartId = `chart-${id}`
|
|
const fixedTitle = title.toUpperCase()
|
|
---
|
|
|
|
<div id={chartId} class={`position-relative ${className}`}></div>
|
|
<CaptureScript>
|
|
<!-- BEGIN CHART RADIAL -->
|
|
<script define:vars={{ chartId, height, value, fixedTitle }}>
|
|
function initRadialChart() {
|
|
window.tabler_chart ??= {}
|
|
|
|
window.ApexCharts &&
|
|
(window.tabler_chart[chartId] = new ApexCharts(document.getElementById(chartId), {
|
|
series: [value],
|
|
chart: {
|
|
height,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -120,
|
|
endAngle: 120,
|
|
hollow: {
|
|
margin: 15,
|
|
size: '70%',
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: true,
|
|
offsetY: -20,
|
|
fontSize: '14px',
|
|
fontFamily: 'inherit',
|
|
fontWeight: 400,
|
|
color: 'var(--tblr-secondary)',
|
|
},
|
|
value: {
|
|
show: true,
|
|
fontSize: '30px',
|
|
fontWeight: 700,
|
|
fontFamily: 'inherit',
|
|
offsetY: 0,
|
|
color: 'var(--tblr-body-color)',
|
|
formatter: (val) => `${val}%`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: ['var(--tblr-primary)'],
|
|
stroke: {
|
|
lineCap: 'round',
|
|
},
|
|
labels: [fixedTitle],
|
|
})).render()
|
|
}
|
|
|
|
document.readyState !== 'loading' ? initRadialChart() : document.addEventListener('DOMContentLoaded', initRadialChart, { once: true })
|
|
</script>
|
|
<!-- END CHART RADIAL -->
|
|
</CaptureScript>
|