all data hide
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2024 creativeLabs Łukasz Holeczek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+184
@@ -0,0 +1,184 @@
|
||||
<p align="center">
|
||||
<a href="https://coreui.io/">
|
||||
<img
|
||||
src="https://coreui.io/images/brand/coreui-signet.svg"
|
||||
alt="CoreUI logo"
|
||||
width="200"
|
||||
/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 align="center">CoreUI Vue.js wrapper for Chart.js</h3>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://coreui.io/vue/docs/components/chart/"><strong>Explore @coreui/vue-chartjs docs & examples »</strong></a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://github.com/coreui/coreui-vue/issues/new?template=bug_report.md">Report bug</a>
|
||||
·
|
||||
<a href="https://github.com/coreui/coreui-vue/issues/new?template=feature_request.md">Request feature</a>
|
||||
·
|
||||
<a href="https://blog.coreui.io/">Blog</a>
|
||||
</p>
|
||||
|
||||
## Status
|
||||
|
||||
[![npm package][npm-badge]][npm]
|
||||
[![NPM downloads][npm-download]][npm]
|
||||
|
||||
[npm-badge]: https://img.shields.io/npm/v/@coreui/vue-chartjs/latest?style=flat-square
|
||||
[npm]: https://www.npmjs.com/package/@coreui/vue-chartjs
|
||||
[npm-download]: https://img.shields.io/npm/dm/@coreui/vue-chartjs.svg?style=flat-square
|
||||
|
||||
##### install:
|
||||
|
||||
```bash
|
||||
npm install @coreui/vue-chartjs
|
||||
|
||||
# or
|
||||
|
||||
yarn add @coreui/vue-chartjs
|
||||
```
|
||||
|
||||
##### import:
|
||||
|
||||
```jsx
|
||||
import { CChart } from '@coreui/vue-chartjs'
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```js
|
||||
import {
|
||||
CChart,
|
||||
CChartBar,
|
||||
CChartHorizontalBar,
|
||||
CChartLine,
|
||||
CChartDoughnut,
|
||||
CChartRadar,
|
||||
CChartPie,
|
||||
CChartPolarArea,
|
||||
} from '@coreui/vue-chartjs'
|
||||
```
|
||||
|
||||
##### props:
|
||||
|
||||
```js
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chart.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: Object as PropType<ChartOptions>,
|
||||
default: undefined,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: Array as PropType<Plugin[]>,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: Boolean,
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
|
||||
*/
|
||||
type: {
|
||||
type: String as PropType<ChartType>,
|
||||
default: 'bar',
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
required: false,
|
||||
},
|
||||
```
|
||||
|
||||
##### usage:
|
||||
|
||||
```vue
|
||||
<CChartLine
|
||||
:wrapper="false"
|
||||
:data="{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(220, 220, 220, 0.2)',
|
||||
borderColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
data: [40, 20, 12, 39, 10, 40, 39]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(151, 187, 205, 0.2)',
|
||||
borderColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
data: [50, 12, 28, 29, 7, 25, 12]
|
||||
}
|
||||
]
|
||||
}"
|
||||
/>
|
||||
```
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
import { PropType } from 'vue';
|
||||
import { ChartData, Plugin } from 'chart.js/auto';
|
||||
declare const CChart: import("vue").DefineComponent<{
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: PropType<ChartData<keyof import("chart.js/auto").ChartTypeRegistry, (number | [number, number] | import("chart.js/auto").Point | import("chart.js/auto").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => ChartData)>;
|
||||
required: true;
|
||||
};
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chartRef.value.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").CoreChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ElementChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").PluginChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").DatasetChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ScaleChartOptions<keyof import("chart.js/auto").ChartTypeRegistry>>>;
|
||||
};
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: PropType<Plugin<keyof import("chart.js/auto").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: BooleanConstructor;
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
|
||||
*/
|
||||
type: {
|
||||
type: PropType<keyof import("chart.js/auto").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: PropType<ChartData<keyof import("chart.js/auto").ChartTypeRegistry, (number | [number, number] | import("chart.js/auto").Point | import("chart.js/auto").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => ChartData)>;
|
||||
required: true;
|
||||
};
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chartRef.value.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").CoreChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ElementChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").PluginChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").DatasetChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ScaleChartOptions<keyof import("chart.js/auto").ChartTypeRegistry>>>;
|
||||
};
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: PropType<Plugin<keyof import("chart.js/auto").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: BooleanConstructor;
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
|
||||
*/
|
||||
type: {
|
||||
type: PropType<keyof import("chart.js/auto").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js/auto").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>;
|
||||
export default CChart;
|
||||
+695
@@ -0,0 +1,695 @@
|
||||
import { App } from 'vue';
|
||||
import CChart from './CChart';
|
||||
declare const CChartBar: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartBubble: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartDoughnut: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartLine: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPie: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPolarArea: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartRadar: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartScatter: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPlugin: {
|
||||
install: (app: App) => void;
|
||||
};
|
||||
export default CChartPlugin;
|
||||
export { CChart, CChartBar, CChartBubble, CChartDoughnut, CChartLine, CChartPie, CChartPolarArea, CChartRadar, CChartScatter, };
|
||||
+19759
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+175
@@ -0,0 +1,175 @@
|
||||
import { PropType } from 'vue';
|
||||
import { ChartData, Plugin } from 'chart.js/auto';
|
||||
declare const CChart: import("vue").DefineComponent<{
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: PropType<ChartData<keyof import("chart.js/auto").ChartTypeRegistry, (number | [number, number] | import("chart.js/auto").Point | import("chart.js/auto").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => ChartData)>;
|
||||
required: true;
|
||||
};
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chartRef.value.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").CoreChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ElementChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").PluginChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").DatasetChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ScaleChartOptions<keyof import("chart.js/auto").ChartTypeRegistry>>>;
|
||||
};
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: PropType<Plugin<keyof import("chart.js/auto").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: BooleanConstructor;
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
|
||||
*/
|
||||
type: {
|
||||
type: PropType<keyof import("chart.js/auto").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: PropType<ChartData<keyof import("chart.js/auto").ChartTypeRegistry, (number | [number, number] | import("chart.js/auto").Point | import("chart.js/auto").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => ChartData)>;
|
||||
required: true;
|
||||
};
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chartRef.value.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").CoreChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ElementChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").PluginChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").DatasetChartOptions<keyof import("chart.js/auto").ChartTypeRegistry> & import("chart.js/auto").ScaleChartOptions<keyof import("chart.js/auto").ChartTypeRegistry>>>;
|
||||
};
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: PropType<Plugin<keyof import("chart.js/auto").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: BooleanConstructor;
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
|
||||
*/
|
||||
type: {
|
||||
type: PropType<keyof import("chart.js/auto").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js/auto").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>;
|
||||
export default CChart;
|
||||
+695
@@ -0,0 +1,695 @@
|
||||
import { App } from 'vue';
|
||||
import CChart from './CChart';
|
||||
declare const CChartBar: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartBubble: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartDoughnut: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartLine: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPie: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPolarArea: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartRadar: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartScatter: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent")[], "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
customTooltips: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
data: {
|
||||
type: import("vue").PropType<import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown> | ((canvas: HTMLCanvasElement) => import("chart.js").ChartData<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>)>;
|
||||
required: true;
|
||||
};
|
||||
height: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
id: {
|
||||
type: StringConstructor;
|
||||
};
|
||||
options: {
|
||||
type: import("vue").PropType<import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>>;
|
||||
};
|
||||
plugins: {
|
||||
type: import("vue").PropType<import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[]>;
|
||||
};
|
||||
redraw: BooleanConstructor;
|
||||
type: {
|
||||
type: import("vue").PropType<keyof import("chart.js").ChartTypeRegistry>;
|
||||
default: string;
|
||||
};
|
||||
width: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
wrapper: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
onGetDatasetAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
onGetElementsAtEvent?: ((...args: any[]) => any) | undefined;
|
||||
}, {
|
||||
customTooltips: boolean;
|
||||
height: number;
|
||||
redraw: boolean;
|
||||
type: keyof import("chart.js").ChartTypeRegistry;
|
||||
width: number;
|
||||
wrapper: boolean;
|
||||
}, {}>, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
||||
declare const CChartPlugin: {
|
||||
install: (app: App) => void;
|
||||
};
|
||||
export default CChartPlugin;
|
||||
export { CChart, CChartBar, CChartBubble, CChartDoughnut, CChartLine, CChartPie, CChartPolarArea, CChartRadar, CChartScatter, };
|
||||
+19746
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+68
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"name": "@coreui/vue-chartjs",
|
||||
"version": "3.0.0",
|
||||
"description": "Vue component wrapper for Chart.js",
|
||||
"keywords": [
|
||||
"coreui",
|
||||
"chart.js",
|
||||
"vue chart.js",
|
||||
"coreui-vue",
|
||||
"vue charts",
|
||||
"vue chart components",
|
||||
"layout",
|
||||
"charts",
|
||||
"vue chart.js implementation",
|
||||
"component"
|
||||
],
|
||||
"homepage": "https://coreui.io/vue/",
|
||||
"bugs": {
|
||||
"url": "https://github.com/coreui/coreui-vue/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/coreui/coreui-vue.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"jsnext:main": "dist/esm/index.js",
|
||||
"types": "dist/esm/index.d.ts",
|
||||
"files": [
|
||||
"dist/",
|
||||
"src/"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "rollup --config",
|
||||
"test": "jest --coverage",
|
||||
"test:clear": "jest --clearCache",
|
||||
"test:update": "jest --coverage --updateSnapshot"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/chartjs": "^4.0.0",
|
||||
"chart.js": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@types/lodash": "^4.17.0",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@vue/test-utils": "^2.4.5",
|
||||
"@vue/vue3-jest": "29.2.6",
|
||||
"jest": "^29.7.0",
|
||||
"jest-canvas-mock": "^2.5.2",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"lodash": "^4.17.21",
|
||||
"rollup": "^4.13.2",
|
||||
"rollup-plugin-vue": "^6.0.0",
|
||||
"ts-jest": "^29.1.2",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.4.3",
|
||||
"vue": "^3.4.21",
|
||||
"vue-types": "^5.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.21"
|
||||
}
|
||||
}
|
||||
+269
@@ -0,0 +1,269 @@
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
h,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
onUpdated,
|
||||
PropType,
|
||||
ref,
|
||||
Ref,
|
||||
shallowRef,
|
||||
} from 'vue'
|
||||
|
||||
import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto'
|
||||
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
|
||||
|
||||
import assign from 'lodash/assign'
|
||||
import find from 'lodash/find'
|
||||
import merge from 'lodash/merge'
|
||||
|
||||
const CChart = defineComponent({
|
||||
name: 'CChart',
|
||||
props: {
|
||||
/**
|
||||
* Enables custom html based tooltips instead of standard tooltips.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
customTooltips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* The data object that is passed into the Chart.js chart (more info).
|
||||
*/
|
||||
data: {
|
||||
type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* Height attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 150
|
||||
*/
|
||||
height: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
/**
|
||||
* ID attribute applied to the rendered canvas.
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
},
|
||||
/**
|
||||
* The options object that is passed into the Chart.js chartRef.value.
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
|
||||
*/
|
||||
options: {
|
||||
type: Object as PropType<ChartOptions>,
|
||||
},
|
||||
/**
|
||||
* The plugins array that is passed into the Chart.js chart (more info)
|
||||
*
|
||||
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
|
||||
*/
|
||||
plugins: {
|
||||
type: Array as PropType<Plugin[]>,
|
||||
},
|
||||
/**
|
||||
* If true, will tear down and redraw chart on all updates.
|
||||
*/
|
||||
redraw: Boolean,
|
||||
/**
|
||||
* Chart.js chart type.
|
||||
*
|
||||
* @type 'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'
|
||||
*/
|
||||
type: {
|
||||
type: String as PropType<ChartType>,
|
||||
default: 'bar',
|
||||
},
|
||||
/**
|
||||
* Width attribute applied to the rendered canvas.
|
||||
*
|
||||
* @default 300
|
||||
*/
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
/**
|
||||
* Put the chart into the wrapper div element.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
wrapper: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: [
|
||||
/**
|
||||
* Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
|
||||
*/
|
||||
'getDatasetAtEvent',
|
||||
/**
|
||||
* Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
|
||||
*/
|
||||
'getElementAtEvent',
|
||||
/**
|
||||
* Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
|
||||
*/
|
||||
'getElementsAtEvent',
|
||||
],
|
||||
setup(props, { expose, emit, slots }) {
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
const chartRef = shallowRef<Chart | null>(null)
|
||||
|
||||
const computedData = computed(() =>
|
||||
typeof props.data === 'function'
|
||||
? canvasRef.value
|
||||
? props.data(canvasRef.value)
|
||||
: { datasets: [] }
|
||||
: merge({}, props.data),
|
||||
)
|
||||
|
||||
const computedOptions = computed(() =>
|
||||
props.customTooltips
|
||||
? merge({}, props.options, {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
position: 'nearest',
|
||||
external: cuiCustomTooltips,
|
||||
},
|
||||
},
|
||||
})
|
||||
: props.options,
|
||||
)
|
||||
|
||||
const renderChart = () => {
|
||||
if (!canvasRef.value) return
|
||||
|
||||
chartRef.value = new Chart(canvasRef.value, {
|
||||
type: props.type,
|
||||
data: computedData.value,
|
||||
options: computedOptions.value,
|
||||
plugins: props.plugins,
|
||||
})
|
||||
}
|
||||
|
||||
const handleOnClick = (e: Event) => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
emit(
|
||||
'getDatasetAtEvent',
|
||||
chartRef.value.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false),
|
||||
e,
|
||||
)
|
||||
emit(
|
||||
'getElementAtEvent',
|
||||
chartRef.value.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false),
|
||||
e,
|
||||
)
|
||||
emit(
|
||||
'getElementsAtEvent',
|
||||
chartRef.value.getElementsAtEventForMode(e, 'index', { intersect: true }, false),
|
||||
e,
|
||||
)
|
||||
}
|
||||
|
||||
const updateChart = () => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
if (props.options) {
|
||||
chartRef.value.options = { ...props.options }
|
||||
}
|
||||
|
||||
if (!chartRef.value.config.data) {
|
||||
chartRef.value.config.data = computedData.value
|
||||
chartRef.value.update()
|
||||
return
|
||||
}
|
||||
|
||||
const { datasets: newDataSets = [], ...newChartData } = computedData.value
|
||||
const { datasets: currentDataSets = [] } = chartRef.value.config.data
|
||||
|
||||
// copy values
|
||||
assign(chartRef.value.config.data, newChartData)
|
||||
chartRef.value.config.data.datasets = newDataSets.map((newDataSet: any) => {
|
||||
// given the new set, find it's current match
|
||||
const currentDataSet = find(
|
||||
currentDataSets,
|
||||
(d: any) => d.label === newDataSet.label && d.type === newDataSet.type,
|
||||
)
|
||||
|
||||
// There is no original to update, so simply add new one
|
||||
if (!currentDataSet || !newDataSet.data) return newDataSet
|
||||
|
||||
if (!currentDataSet.data) {
|
||||
currentDataSet.data = []
|
||||
} else {
|
||||
currentDataSet.data.length = newDataSet.data.length
|
||||
}
|
||||
|
||||
// copy in values
|
||||
assign(currentDataSet.data, newDataSet.data)
|
||||
|
||||
// apply dataset changes, but keep copied data
|
||||
return {
|
||||
...currentDataSet,
|
||||
...newDataSet,
|
||||
data: currentDataSet.data,
|
||||
}
|
||||
})
|
||||
|
||||
chartRef.value && chartRef.value.update()
|
||||
}
|
||||
|
||||
const destroyChart = () => {
|
||||
if (chartRef.value) chartRef.value.destroy()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
destroyChart()
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
if (props.redraw) {
|
||||
destroyChart()
|
||||
setTimeout(() => {
|
||||
renderChart()
|
||||
}, 0)
|
||||
} else {
|
||||
updateChart()
|
||||
}
|
||||
})
|
||||
|
||||
const canvas = (ref: Ref<HTMLCanvasElement | null>) =>
|
||||
h(
|
||||
'canvas',
|
||||
{
|
||||
id: props.id,
|
||||
height: props.height,
|
||||
width: props.width,
|
||||
onClick: (e: Event) => handleOnClick(e),
|
||||
role: 'img',
|
||||
ref: ref,
|
||||
},
|
||||
{
|
||||
fallbackContent: () => slots.fallback && slots.fallback(),
|
||||
},
|
||||
)
|
||||
|
||||
expose({ chart: chartRef })
|
||||
|
||||
return () =>
|
||||
props.wrapper ? h('div', { class: 'chart-wrapper' }, canvas(canvasRef)) : canvas(canvasRef)
|
||||
},
|
||||
})
|
||||
|
||||
export default CChart
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Chart from 'chart.js/auto'
|
||||
import CChart from './../index'
|
||||
|
||||
class ResizeObserver {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
observe() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
unobserve() {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
window.ResizeObserver = ResizeObserver
|
||||
|
||||
describe('<CChart />', () => {
|
||||
const data = {
|
||||
labels: ['red', 'blue'],
|
||||
datasets: [{ label: 'colors', data: [1, 2] }],
|
||||
}
|
||||
|
||||
const options = {
|
||||
responsive: false,
|
||||
}
|
||||
|
||||
let chart: any, update: any, destroy: any
|
||||
const ref = (el: Chart | null): void => {
|
||||
chart = el
|
||||
|
||||
if (chart) {
|
||||
update = jest.spyOn(chart, 'update')
|
||||
destroy = jest.spyOn(chart, 'destroy')
|
||||
}
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
chart = null
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
if (chart) chart.destroy()
|
||||
if (update) update.mockClear()
|
||||
if (destroy) destroy.mockClear()
|
||||
})
|
||||
|
||||
it('should not pollute props', () => {
|
||||
mount(CChart, {
|
||||
propsData: {
|
||||
data: data,
|
||||
options: options,
|
||||
wrapper: false,
|
||||
},
|
||||
attrs: {
|
||||
ref: ref,
|
||||
}
|
||||
})
|
||||
|
||||
expect(data).toStrictEqual({
|
||||
labels: ['red', 'blue'],
|
||||
datasets: [{ label: 'colors', data: [1, 2] }],
|
||||
})
|
||||
})
|
||||
})
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/* eslint-disable vue/one-component-per-file */
|
||||
import { App, defineComponent, h } from 'vue'
|
||||
import CChart from './CChart'
|
||||
|
||||
const CChartBar = defineComponent({
|
||||
name: 'CChartBar',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'bar' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartBubble = defineComponent({
|
||||
name: 'CChartBubble',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'bubble' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartDoughnut = defineComponent({
|
||||
name: 'CChartDoughnut',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'doughnut' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartLine = defineComponent({
|
||||
name: 'CChartLine',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'line' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartPie = defineComponent({
|
||||
name: 'CChartPie',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'pie' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartPolarArea = defineComponent({
|
||||
name: 'CChartPolarArea',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'polarArea' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartRadar = defineComponent({
|
||||
name: 'CChartRadar',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'radar' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartScatter = defineComponent({
|
||||
name: 'CChartScatter',
|
||||
extends: CChart,
|
||||
setup(props) {
|
||||
return () => h(CChart, { ...props, type: 'scatter' })
|
||||
},
|
||||
})
|
||||
|
||||
const CChartPlugin = {
|
||||
install: (app: App): void => {
|
||||
app.component('CChart', CChart)
|
||||
app.component('CChartBar', CChartBar)
|
||||
app.component('CChartBubble', CChartBubble)
|
||||
app.component('CChartDoughnut', CChartDoughnut)
|
||||
app.component('CChartLine', CChartLine)
|
||||
app.component('CChartPie', CChartPie)
|
||||
app.component('CChartPolarArea', CChartPolarArea)
|
||||
app.component('CChartRadar', CChartRadar)
|
||||
app.component('CChartScatter', CChartScatter)
|
||||
},
|
||||
}
|
||||
|
||||
export default CChartPlugin
|
||||
|
||||
export {
|
||||
CChart,
|
||||
CChartBar,
|
||||
CChartBubble,
|
||||
CChartDoughnut,
|
||||
CChartLine,
|
||||
CChartPie,
|
||||
CChartPolarArea,
|
||||
CChartRadar,
|
||||
CChartScatter,
|
||||
}
|
||||
Reference in New Issue
Block a user