diff --git a/.ls-lint.yml b/.ls-lint.yml index 1642ad5bdf33cce1d5098a7fc8b21b549e6da2a8..ac8a63998db51b447e9463922f967cf38cd8b4ec 100644 --- a/.ls-lint.yml +++ b/.ls-lint.yml @@ -3,9 +3,9 @@ ls: # .dir: kebab-case | regex:__[A-Za-z0-9]+__ .scss: kebab-case .vue: kebab-case - .js: kebab-case - .ts: kebab-case - .tsx: kebab-case + .js: kebab-case + .ts: kebab-case + .tsx: kebab-case .component.tsx: kebab-case .design.component.tsx: kebab-case .item.component.tsx: kebab-case @@ -139,6 +139,15 @@ ignore: - packages/code-editor/package - packages/code-editor/demos - packages/code-editor/types + # charts-vue + - packages/charts-vue/.vscode + - packages/charts-vue/docs/.vitepress + - packages/charts-vue/node_modules + - packages/charts-vue/dist + - packages/charts-vue/public + - packages/charts-vue/docs + - packages/charts-vue/package + - packages/charts-vue/demos # admin - packages/farris-admin/node_modules # mobile-render diff --git a/eslint.config.mjs b/eslint.config.mjs index 527dee74e58352b9af3ffcceafcea5198d44a635..fa5cb4a940f8ac50935770355ead4bb298518353 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -23,6 +23,8 @@ export default [ "packages/**/package/*", "packages/ui-vue/docs/*", "packages/ui-vue/demos/*", + "packages/charts-vue/docs/*", + "packages/charts-vue/demos/*", "packages/farris-theme/*", "packages/f-theme-editor-project/*", "packages/mobile-ui-vue/docs/*", diff --git a/lerna.json b/lerna.json index c12be3c6dc4f48455ddfbda1f9c879e991fd0d94..1ba83d1ac88cd3e332b1fb685698d0f5a1e85929 100644 --- a/lerna.json +++ b/lerna.json @@ -6,6 +6,7 @@ "packages/farris-theme", "packages/renderer", "packages/ui-vue", + "packages/charts-vue", "packages/mobile-ui-vue", "packages/devkit", "packages/designer", diff --git a/package.json b/package.json index b390fc74c90d812384bc12b60a951314f5f732e9..3369ab02aee2a426325e38cf0826cae5538a3aee 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "prepare": "husky install", "farrisTheme": "node ./packages/f-theme-editor-project/farris-themebuilder-service/farris.js", "docs:dev": "pnpm --filter ui-vue run docs:dev", + "charts-docs:dev": "pnpm --filter charts-vue run docs:dev", "designer": "pnpm --filter designer run dev", "demo": "pnpm --filter ui-vue dev", "build:devkit-vue": "pnpm --filter devkit-vue run build:lib && pnpm --filter devkit-vue run rollup", @@ -14,6 +15,7 @@ "build:ui-binding-vue": "pnpm --filter ui-binding-vue run build:lib && pnpm --filter ui-binding-vue run rollup", "build:renderer": "pnpm --filter renderer run build:system", "build:ui-vue": "pnpm --filter ui-vue run build:lib && pnpm --filter ui-vue run build:system", + "build:charts-vue": "pnpm --filter charts-vue run build:lib && pnpm --filter charts-vue run build:system", "build:designer": "pnpm --filter designer run build:system", "build:expression-engine-vue": "pnpm --filter expression-engine-vue run rollup", "admin": "pnpm --filter farris-admin dev", @@ -82,7 +84,7 @@ "fs-extra": "^11.2.0", "happy-dom": "^14.12.0", "highlight.js": "^11.9.0", - "husky": "^9.0.0", + "husky": "^8.0.0", "inquirer": "^9.1.1", "intersection-observer": "^0.12.2", "jest": "^29.0.0", @@ -117,7 +119,9 @@ }, "lint-staged": { "packages/ui-vue/{*.vue,*.js,*.ts,*.jsx,*.tsx}": "eslint --fix", - "packages/ui-vue/{*.scss,*.css}": "stylelint --fix" + "packages/ui-vue/{*.scss,*.css}": "stylelint --fix", + "packages/charts-vue/{*.vue,*.js,*.ts,*.jsx,*.tsx}": "eslint --fix", + "packages/charts-vue/{*.scss,*.css}": "stylelint --fix" }, "dependencies": { "@eslint/js": "^9.19.0", @@ -130,4 +134,4 @@ "ts-jest": "^29.1.2", "typescript-eslint": "^8.18.0" } -} \ No newline at end of file +} diff --git a/packages/charts-vue/.gitignore b/packages/charts-vue/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..ca8018c48b20a44abef75a8ca13ce6f2aa0c518a --- /dev/null +++ b/packages/charts-vue/.gitignore @@ -0,0 +1,31 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +!/docs/.vitepress/dist +*.local +coverage +package + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Vitepress +*/.vitepress/cache +*/.vitepress/dist diff --git a/packages/charts-vue/CHANGELOG.md b/packages/charts-vue/CHANGELOG.md new file mode 100644 index 0000000000000000000000000000000000000000..62c3b1a1db15a31e79348a8149d9eef5973ca238 --- /dev/null +++ b/packages/charts-vue/CHANGELOG.md @@ -0,0 +1,7 @@ +# @farris/charts-vue + +## 0.0.1 + +### Patch Changes + +- update ui libs diff --git a/packages/charts-vue/PROPERTY.md b/packages/charts-vue/PROPERTY.md new file mode 100644 index 0000000000000000000000000000000000000000..90d6835cdced41ce924e92aa2ab9b1893d85f4de --- /dev/null +++ b/packages/charts-vue/PROPERTY.md @@ -0,0 +1,59 @@ +# 组件的属性与属性面板结合 + +## 可以获取的服务有哪些 +1. 服务的定义,在路径:packages/designer/src/composition下 +2. 注入位置:designer.component.tsx和form-designer/form-designer.component.tsx下,注意两个位置的注入服务不要重复。 +3. 可以通过在上述位置inject注入更多的服务 +4. 在DesignerCanvas中可以获取的服务,构造位置:packages/ui-vue/components/designer-canvas/designer-canvas.component.tsx +``` +provide('design-host-service',....) +``` + +通过更改DesignHostService类型,追加新属性,丰富服务 + +## 组件设计时属性的基础类 +1. 在路径:packages/ui-vue/common/property/base-property.ts +2. 上述BaseControlProperty类,被具体组件的属性类所继承,可以在此位置定义通用的方法、属性 + +## 组件如何获取复杂服务 +以data-grid为例,在路径:packages/ui-vue/components/data-grid +1. designer/data-grid.design.component.tsx +``` + const designerHostService=inject('designer-host-service'); + // 构造属性配置方法 + componentInstance.value['getPropertyConfig'] = (componentId:string) => { + const dataGridProp = new DataGridProperty(componentId,designerHostService); + return dataGridProp.getPropertyConfig(componentInstance.value.schema); + } + +``` +- 传递服务、组件ID参数,初始化DataGridProperty +- 在类内部可以取到继承BaseControlProperty自的方法、属性,比如获取viewModelId、formSchemaUtils等。 + +2. property-config/data-grid.property-config.ts + - 这个文件处理组件的设计时属性,构造基本信息、外观、事件。 +``` +export class DataGridProperty extends BaseControlProperty { + getPropertyConfig(propertyData: any) { + // 基本信息 + this.getBasicPropConfig(propertyData); + // 外观 + this.getAppearanceProperties(propertyData); + // 事件 + this.getEventPropConfig(propertyData); + return this.propertyConfig; + } +} + +``` +3. 注意改造data-grid.props.ts +``` +export const propsResolver = createPropsResolver(dataGridProps, dataGridSchema, schemaMapper, schemaResolver, DataGridProperty); + +``` +更改为 +``` +export const propsResolver = createPropsResolver(dataGridProps, dataGridSchema, schemaMapper, schemaResolver); +``` + + diff --git a/packages/charts-vue/README.md b/packages/charts-vue/README.md new file mode 100644 index 0000000000000000000000000000000000000000..c2079988ec552cf04a6a6bf90266d9ad117eaafc --- /dev/null +++ b/packages/charts-vue/README.md @@ -0,0 +1,51 @@ +

+ + Farris UI Logo + +

+ +

Farris Charts Vue

+ +

Farris Charts Vue 是一套基于 Farris Design 的前端组件库。

+ +## 1. 编写组件 + 在components目录下,以组件名创建源代码目录,参考[贡献指南(https://gitee.com/ubml/farris-vue/blob/master/style-guide/vue_component_style_guide.md)](https://gitee.com/ubml/farris-vue/blob/master/style-guide/vue_component_style_guide.md)实现组件。 + +## 2. 提供示例页面 + 开发者在charts-vue/demo目录按照{组件名}/{组件特性}.vue实现示例页面。 + +## 3. 注册示例页面路由 + 在`charts-vue/src/app.vue`组件,编辑`routes`对象,添加路由信息,例如: +```typescript +import GridLayoutWrapper from '../demos/grid-layout/grid-layout.vue'; + +const routes: Record = { + '/gridlayout/basic': GridLayoutWrapper, +}; +``` + +## 4. 运行示例页面 + 开发者执行`npx vite dev --open #{示例页面路由}`在浏览器打开示例页面,例如: +``` +npx vite dev --open #grid-layout/basic +``` +## 5. 编写组件说明文档 + 开发者在`charts-vue/docs/components`目录下,已markdown格式编写说明文档,以`{示例页面路径}`方式引用示例页面,例如: + + +\# GridLayout 栅栏布局 + +GridLayout 组件提供了栅栏式、响应式布局。 + +\## 基本用法 + +:::vdemo + +\```vue + +{demos/grid-layout/grid-layout.vue} + +\``` + +::: + diff --git a/packages/charts-vue/__mocks__/style-mock.ts b/packages/charts-vue/__mocks__/style-mock.ts new file mode 100644 index 0000000000000000000000000000000000000000..ff8b4c56321a3362fc00224b01800f62466f9a1f --- /dev/null +++ b/packages/charts-vue/__mocks__/style-mock.ts @@ -0,0 +1 @@ +export default {}; diff --git a/packages/charts-vue/components/charts-combined/index.ts b/packages/charts-vue/components/charts-combined/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..fc3958212fd0ce35f08ce4712886cd6d87b61101 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/index.ts @@ -0,0 +1,6 @@ +import FCharstCombined from './src/charts-combined.component'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/charts-combined.props'; +export { FCharstCombined }; +export default withInstall(FCharstCombined); diff --git a/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx b/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6b87d1cb160039c63480dc585a1e063e411a16f4 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx @@ -0,0 +1,133 @@ +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { ChartsCombinedProps, chartsCombinedProps } from './charts-combined.props'; +import { ActionEventArray, DatazoomEventArray, MouseEventArray, RenderEventArray, useActionEvent, useMouseEvent, useChartsTheme, useDatazoomEvent, useRenderEvent } from '@farris/charts-vue/components/charts-common'; + +export default defineComponent({ + name: 'FChartsCombined', + props: chartsCombinedProps, + emits: [ + ...MouseEventArray, + ...ActionEventArray, + ...DatazoomEventArray, + ...RenderEventArray + ], + setup(props: ChartsCombinedProps, context: SetupContext) { + const chartRef = ref(null); + let chartInstance: ECharts | null = null; + let observer: ResizeObserver | null = null; + + const { getTheme, getThemeByName, registerTheme } = useChartsTheme(); + + const initChart = () => { + registerTheme(); + + if (!chartRef.value) { + return; + } + + const theme = getTheme(); + + chartInstance = echarts.init(chartRef.value, theme, {}); + + // eslint-disable-next-line no-use-before-define + updateChart(); + + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); + onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); + + const { onHighLight, onDownPlay, onSelectChanged } = useActionEvent(chartInstance, context); + onHighLight(), onDownPlay(), onSelectChanged(); + + const { onDatazoom } = useDatazoomEvent(chartInstance, context); + onDatazoom(); + + const { onFinished, onRendered } = useRenderEvent(chartInstance, context); + onFinished(), onRendered(); + }; + + function updateChart() { + if (!chartInstance) { + return; + } + + let theme: any = null; + if (props.theme !== getTheme()) { + theme = getThemeByName(props.theme); + } + + const baseOption: any = { + ...theme, + title: props.title || {}, + grid: props.grid || {}, + xAxis: props.xAxis || {}, + yAxis: props.yAxis || {}, + tooltip: props.tooltip || {}, + legend: props.legend || {}, + toolbox: props.toolbox || {}, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + if (s.type !== 'line' && s.type !== 'bar') { + throw 'The combination chart only supports line charts and bar charts.'; + } + return s; + }) + }; + + chartInstance.setOption(baseOption, true); + } + + const resizeChart = () => { + if (chartInstance) { + chartInstance.resize(); + } + }; + + // 监听容器大小变化 + const initResizeObserver = () => { + observer = new ResizeObserver(() => { + resizeChart(); + }); + if (chartRef.value) { + observer.observe(chartRef.value); + } + }; + + onMounted(() => { + initChart(); + initResizeObserver(); + }); + + onBeforeUnmount(() => { + if (observer) { + observer.disconnect(); + } + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } + }); + + watch( + () => props, + () => { + updateChart(); + }, + { deep: true } + ); + + return () => ( +
+ ); + } +}); diff --git a/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts b/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..b64e52819ad7f277109fe7305913597f632fd446 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts @@ -0,0 +1,138 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { + AxisProps, animationProps, ToolboxProps, DataProps, ColorByType, StackStrategyType, LabelProps, + LabelLineProps, LabelLayoutProps, ItemStyleProps, LineStyleProps, AreaStyleProps, BlurProps, + SelectProps, TooltipProps, SelectedModeType, SamplingType, TextStyleProps, LegendProps, TitleProps, + GridProps, DataZoomProps, + CombinedType +} from '@farris/charts-vue/components/charts-common'; + +export const combinedSeriesProps = { + type: { type: String as PropType }, + + id: { type: String }, + + name: { type: String }, + + colorBy: { type: String as PropType }, + + xAxisIndex: { type: Number }, + + yAxisIndex: { type: Number }, + + symbol: { type: String, Array, default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + symbolRotate: { type: Number }, + + legendHoverLink: { type: Boolean, default: true }, + /** 数据堆叠,目前只支持堆叠 value 和 log */ + stack: { type: String }, + /** 堆积数值的策略,前提是stack属性已被设置 */ + stackStrategy: { type: String as PropType }, + + cursor: { type: String, default: 'pointer' }, + /** 是否裁剪超出坐标系部分的图形 */ + clip: { type: Boolean, default: true }, + + triggerLineEvent: { type: Boolean, default: false }, + + step: { type: Boolean, default: false }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + labelLayout: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + areaStyle: { type: Object as PropType }, + + blur: { type: Object as PropType }, + + select: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + selectedMode: { type: String as PropType }, + + smooth: { type: [Boolean, Number] }, + + sampling: { type: String as PropType }, + + data: { type: Object as PropType }, + /** 使用 dimensions 定义 series.data 或者 dataset.source 的每个维度的信息。 */ + dimensions: { type: Array }, + /** 可以定义 data 的哪个维度被编码成什么。 */ + encode: { type: Object }, + /** 当使用 dataset 时,seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上。column row */ + seriesLayoutBy: { type: String }, + /** 如果 series.data 没有指定,并且 dataset 存在,那么就会使用 dataset。datasetIndex 指定本系列使用哪个 dataset */ + datasetIndex: { type: Number }, + + roundCap: { type: Boolean, default: false }, + + realtimeSort: { type: Boolean, default: false }, + + barWidth: { type: [Number, String] }, + + barMaxWidth: { type: [Number, String] }, + + barMinWidth: { type: [Number, String] }, + + barMaxHeight: { type: [Number, String] }, + + barMinHeight: { type: [Number, String] }, + + barGap: { type: String }, + + ...animationProps +}; + +export type CombinedSeriesProps = ExtractPropTypes; + +export const chartsCombinedProps = { + title: { type: Object as PropType }, + + legend: { type: Object as PropType }, + + grid: { type: Object as PropType }, + + dataZoom: { type: Object as PropType }, + + toolbox: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + color: { type: Array }, + + backgroundColor: { type: String }, + + width: { type: [Number, String] }, + + height: { type: [Number, String] }, + + textStyle: { type: Object as PropType }, + + series: { type: Array as PropType, default: [{ ...combinedSeriesProps }] }, + + xAxis: { type: Object as PropType }, + + yAxis: { type: Object as PropType }, + + theme: { type: String, default: 'defaultTheme' }, + + ...animationProps +}; + +export type ChartsCombinedProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/index.ts b/packages/charts-vue/components/charts-common/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..bb3d1cf3a5c87eae6646509e5d2d9b3d8eda9ead --- /dev/null +++ b/packages/charts-vue/components/charts-common/index.ts @@ -0,0 +1,31 @@ +export * from './src/props/type/common.type'; +export * from './src/props/common/blur.props'; +export * from './src/props/common/datazoom.props'; +export * from './src/props/common/grid.props'; +export * from './src/props/common/itemstyle.props'; +export * from './src/props/common/label.props'; +export * from './src/props/common/labellayout.props'; +export * from './src/props/common/labelline.props'; +export * from './src/props/common/legend.props'; +export * from './src/props/common/select.props'; +export * from './src/props/common/textstyle.props'; +export * from './src/props/common/title.props'; +export * from './src/props/common/axis.props'; +export * from './src/props/common/data.props'; +export * from './src/props/common/border.props'; +export * from './src/props/common/animation.props'; +export * from './src/props/common/toolbox.props'; +export * from './src/compositions/type'; +export * from './src/compositions/use-action-event'; +export * from './src/compositions/use-brush-event'; +export * from './src/compositions/use-datazoom-event'; +export * from './src/compositions/use-geo-event'; +export * from './src/compositions/use-georoam-event'; +export * from './src/compositions/use-graph-event'; +export * from './src/compositions/use-legend-event'; +export * from './src/compositions/use-mouse-event'; +export * from './src/compositions/use-parallel-event'; +export * from './src/compositions/use-render-event'; +export * from './src/compositions/use-timeline-event'; +export * from './src/compositions/use-theme'; +export * from './src/utils/with-install'; diff --git a/packages/charts-vue/components/charts-common/src/compositions/type.ts b/packages/charts-vue/components/charts-common/src/compositions/type.ts new file mode 100644 index 0000000000000000000000000000000000000000..adca6d5327b766594678d885834e719eb4cdc939 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/type.ts @@ -0,0 +1,141 @@ +export const MouseEventArray = [ + 'click','dblclick','mousedown','mousemove','mouseup','mouseover','mouseout','globalout','contextmenu' +]; + +export const ActionEventArray = ['highlight','downplay','selectchanged']; + +export const LegendEventArray = [ + 'legendselectchanged','legendselected','legendunselected','legendselectall','legendinverseselect','legendscroll' +]; + +export const DatazoomEventArray = ['datazoom']; + +export const VisualMapEventArray = ['datarangeselected']; + +export const GraphEventArray = ['graphroam']; + +export const GeoroamEventArray = ['georoam']; + +export const TreeEventArray = ['treeroam']; + +export const TimeLineEventArray = ['timelinechanged','timelineplaychanged']; + +export const ToolboxEventArray = ['restore','dataviewchanged','magictypechanged']; + +export const GeoEventArray = ['geoselectchanged','geoselected','geounselected']; + +export const ParallelEventArray = ['axisareaselected']; + +export const BrushEventArray = ['brush','brushEnd','brushselected']; + +export const RenderEventArray = ['rendered','finished']; + +export interface UseMouseEvent { + onClick: () => void; + + onDbClick: () => void; + + onMousedown: () => void; + + onMousemove: () => void; + + onMouseup: () => void; + + onMouseover: () => void; + + onMouseout: () => void; + + onGlobalout: () => void; + + onContextmenu: () => void; +} + +export interface UseActionEvent { + onHighLight: () => void; + + onDownPlay: () => void; + + onSelectChanged: () => void; +} + +export interface UseLegendEvent { + onLegendSelectChanged: () => void; + + onLegendSelected: () => void; + + onLegendUnSelected: () => void; + + onLegendSelectAll: () => void; + + onLegendInverseSelect: () => void; + + onLegendScroll: () => void; +} + +export interface UseDatazoomEvent { + onDatazoom: () => void; +} + +export interface UseVisualMapEvent { + onDataRangeSelected: () => void; +} + +export interface UseGraphEvent { + onGraphroam: () => void; +} + +export interface UseGeoroamEvent { + onGeoroam: () => void; +} + +export interface UseTreeEvent { + onTreeroam: () => void; +} + +export interface UseTimeLineEvent { + onTimeLineChanged: () => void; + + onTimeLinePlayChanged: () => void; +} + +export interface UseToolboxEvent { + onRestore: () => void; + + onDataViewChanged: () => void; + + onMagicTypeChanged: () => void; +} + +export interface UseGeoEvent { + onGeoSelectChanged: () => void; + + onGeoSelected: () => void; + + onGeounselected: () => void; +} + +export interface UseParallelEvent { + onAxisAreaSelected: () => void; +} + +export interface UseBrushEvent { + onBrush: () => void; + + onBrushEnd: () => void; + + onBrushSelected: () => void; +} + +export interface UseRenderEvent { + onRendered: () => void; + + onFinished: () => void; +} + +export interface UseChartsTheme { + registerTheme: () => void; + + getTheme: () => string; + + getThemeByName: (theme: string) => object; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-action-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-action-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..8001d3c16d759bf2545149cb394f2acbb256a87d --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-action-event.ts @@ -0,0 +1,28 @@ +import { SetupContext } from 'vue'; +import { UseActionEvent } from './type'; + +export function useActionEvent(instance: any, context: SetupContext): UseActionEvent { + function onHighLight(): void { + instance.on('highlight', function ($event) { + context.emit('highlight', $event); + }); + } + + function onDownPlay(): void { + instance.on('downplay', function ($event) { + context.emit('downplay', $event); + }); + } + + function onSelectChanged(): void { + instance.on('selectchanged', function ($event) { + context.emit('selectchanged', $event); + }); + } + + return { + onHighLight, + onDownPlay, + onSelectChanged + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-brush-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-brush-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..4de4960d84d9da341046a39b2cdab34f30bd5777 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-brush-event.ts @@ -0,0 +1,28 @@ +import { SetupContext } from 'vue'; +import { UseBrushEvent } from './type'; + +export function useBrushEvent(instance: any, context: SetupContext): UseBrushEvent { + function onBrush(): void { + instance.on('brush', function ($event) { + context.emit('brush', $event); + }); + } + + function onBrushEnd(): void { + instance.on('brushEnd', function ($event) { + context.emit('brushEnd', $event); + }); + } + + function onBrushSelected(): void { + instance.on('brushselected', function ($event) { + context.emit('brushselected', $event); + }); + } + + return { + onBrush, + onBrushEnd, + onBrushSelected + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-datazoom-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-datazoom-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..f1854bca19de647a07c2fdc8201df670c0ffbd77 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-datazoom-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseDatazoomEvent } from './type'; + +export function useDatazoomEvent(instance: any, context: SetupContext): UseDatazoomEvent { + function onDatazoom(): void { + instance.on('datazoom', function ($event) { + context.emit('datazoom', $event); + }); + } + + return { + onDatazoom + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-geo-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-geo-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..0d558983b5e4ace9edb7f650a4133b035abc87af --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-geo-event.ts @@ -0,0 +1,28 @@ +import { SetupContext } from 'vue'; +import { UseGeoEvent } from './type'; + +export function useGeoEvent(instance: any, context: SetupContext): UseGeoEvent { + function onGeoSelectChanged(): void { + instance.on('geoselectchanged', function ($event) { + context.emit('geoselectchanged', $event); + }); + } + + function onGeoSelected(): void { + instance.on('geoselected', function ($event) { + context.emit('geoselected', $event); + }); + } + + function onGeounselected(): void { + instance.on('geounselected', function ($event) { + context.emit('geounselected', $event); + }); + } + + return { + onGeoSelectChanged, + onGeoSelected, + onGeounselected + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-georoam-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-georoam-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..7887ca9735a32512e5d3b6feaed29ebf7eba77b6 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-georoam-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseGeoroamEvent } from './type'; + +export function useGeoroamEvent(instance: any, context: SetupContext): UseGeoroamEvent { + function onGeoroam(): void { + instance.on('georoam', function ($event) { + context.emit('georoam', $event); + }); + } + + return { + onGeoroam + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-graph-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-graph-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..3aec74901907be3ce9e929be01933b609c027384 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-graph-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseGraphEvent } from './type'; + +export function useGraphEvent(instance: any, context: SetupContext): UseGraphEvent { + function onGraphroam(): void { + instance.on('graphroam', function ($event) { + context.emit('graphroam', $event); + }); + } + + return { + onGraphroam + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-legend-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-legend-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..96062831c2d7f3768e18a725e373b4a910db5da8 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-legend-event.ts @@ -0,0 +1,49 @@ +import { SetupContext } from 'vue'; +import { UseLegendEvent } from './type'; + +export function useLegendEvent(instance: any, context: SetupContext): UseLegendEvent { + function onLegendSelectChanged(): void { + instance.on('legendselectchanged', function ($event) { + context.emit('legendselectchanged', $event); + }); + } + + function onLegendSelected(): void { + instance.on('legendselected', function ($event) { + context.emit('legendselected', $event); + }); + } + + function onLegendUnSelected(): void { + instance.on('legendunselected', function ($event) { + context.emit('legendunselected', $event); + }); + } + + function onLegendSelectAll(): void { + instance.on('legendselectall', function ($event) { + context.emit('legendselectall', $event); + }); + } + + function onLegendInverseSelect(): void { + instance.on('legendinverseselect', function ($event) { + context.emit('legendinverseselect', $event); + }); + } + + function onLegendScroll(): void { + instance.on('legendscroll', function ($event) { + context.emit('legendscroll', $event); + }); + } + + return { + onLegendSelectChanged, + onLegendSelected, + onLegendUnSelected, + onLegendSelectAll, + onLegendInverseSelect, + onLegendScroll + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-mouse-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-mouse-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..4a571692e63860340de0ea7be7973f25631ffba7 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-mouse-event.ts @@ -0,0 +1,70 @@ +import { SetupContext } from 'vue'; +import { UseMouseEvent } from './type'; + +export function useMouseEvent(instance: any, context: SetupContext): UseMouseEvent { + function onClick(): void { + instance.on('click', function ($event) { + context.emit('click', $event); + }); + } + + function onDbClick(): void { + instance.on('dblclick', function ($event) { + context.emit('dblclick', $event); + }); + } + + function onMousedown(): void { + instance.on('mousedown', function ($event) { + context.emit('mousedown', $event); + }); + } + + function onMousemove(): void { + instance.on('mousemove', function ($event) { + context.emit('mousemove', $event); + }); + } + + function onMouseup(): void { + instance.on('mouseup', function ($event) { + context.emit('mouseup', $event); + }); + } + + function onMouseover(): void { + instance.on('mouseover', function ($event) { + context.emit('mouseover', $event); + }); + } + + function onMouseout(): void { + instance.on('mouseout', function ($event) { + context.emit('mouseout', $event); + }); + } + + function onGlobalout(): void { + instance.on('globalout', function ($event) { + context.emit('globalout', $event); + }); + } + + function onContextmenu(): void { + instance.on('contextmenu', function ($event) { + context.emit('contextmenu', $event); + }); + } + + return { + onClick, + onDbClick, + onMousedown, + onMousemove, + onMouseup, + onMouseover, + onMouseout, + onGlobalout, + onContextmenu + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-parallel-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-parallel-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..5c6679f6cae1f8646f01d9ce1ace641f183232d0 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-parallel-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseParallelEvent } from './type'; + +export function useParallelEvent(instance: any, context: SetupContext): UseParallelEvent { + function onAxisAreaSelected(): void { + instance.on('axisareaselected', function ($event) { + context.emit('axisareaselected', $event); + }); + } + + return { + onAxisAreaSelected + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-render-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-render-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..d9acdd9bed71a57b8463f9c35b1a1cf9d1ed5dd5 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-render-event.ts @@ -0,0 +1,21 @@ +import { SetupContext } from 'vue'; +import { UseRenderEvent } from './type'; + +export function useRenderEvent(instance: any, context: SetupContext): UseRenderEvent { + function onRendered(): void { + instance.on('rendered', function ($event) { + context.emit('rendered', $event); + }); + } + + function onFinished(): void { + instance.on('finished', function ($event) { + context.emit('finished', $event); + }); + } + + return { + onRendered, + onFinished + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-theme.ts b/packages/charts-vue/components/charts-common/src/compositions/use-theme.ts new file mode 100644 index 0000000000000000000000000000000000000000..278b6b72049210fa7eb1aea575d7d8cd5a2a42c3 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-theme.ts @@ -0,0 +1,56 @@ +import * as echarts from 'echarts'; +import { SetupContext } from 'vue'; + +import { defaultTheme } from '../theme/default'; +import { defaultSolidcolorTheme } from '../theme/default-solidcolor'; +import { auroraTheme } from '../theme/aurora'; +import { auroraSolidcolorTheme } from '../theme/aurora-solidcolor'; +import { sunshineTheme } from '../theme/sunshine'; +import { sunshineSolidcolorTheme } from '../theme/sunshine-solidcolor'; +import { UseChartsTheme } from './type'; + +export function useChartsTheme(): UseChartsTheme { + function registerTheme() { + echarts.registerTheme('defaultTheme', defaultTheme); + echarts.registerTheme('defaultSolidcolorTheme', defaultSolidcolorTheme); + echarts.registerTheme('auroraTheme', auroraTheme); + echarts.registerTheme('auroraSolidcolorTheme', auroraSolidcolorTheme); + echarts.registerTheme('sunshineTheme', sunshineTheme); + echarts.registerTheme('sunshineSolidcolorTheme', sunshineSolidcolorTheme); + } + + function getTheme() { + return 'defaultTheme'; + } + + function getThemeByName(themeName: string) { + let theme: any = null; + switch (themeName) { + case 'defaultTheme': + theme = defaultTheme; + break; + case 'defaultSolidcolorTheme': + theme = defaultSolidcolorTheme; + break; + case 'auroraTheme': + theme = auroraTheme; + break; + case 'auroraSolidcolorTheme': + theme = auroraSolidcolorTheme; + break; + case 'sunshineTheme': + theme = sunshineTheme; + break; + case 'sunshineSolidcolorTheme': + theme = sunshineSolidcolorTheme; + break; + } + return theme; + } + + return { + registerTheme, + getTheme, + getThemeByName + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-timeline-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-timeline-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..6e795730a1bfdc27b488e0555a268b13c2cb9457 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-timeline-event.ts @@ -0,0 +1,21 @@ +import { SetupContext } from 'vue'; +import { UseTimeLineEvent } from './type'; + +export function useTimeLineEvent(instance: any, context: SetupContext): UseTimeLineEvent { + function onTimeLineChanged(): void { + instance.on('timelinechanged', function ($event) { + context.emit('timelinechanged', $event); + }); + } + + function onTimeLinePlayChanged(): void { + instance.on('timelineplaychanged', function ($event) { + context.emit('timelineplaychanged', $event); + }); + } + + return { + onTimeLineChanged, + onTimeLinePlayChanged + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-toolbox-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-toolbox-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..60d810814627c9e2110ee8cf5e992b0248cc7696 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-toolbox-event.ts @@ -0,0 +1,28 @@ +import { SetupContext } from 'vue'; +import { UseToolboxEvent } from './type'; + +export function useToolboxEvent(instance: any, context: SetupContext): UseToolboxEvent { + function onRestore(): void { + instance.on('restore', function ($event) { + context.emit('restore', $event); + }); + } + + function onDataViewChanged(): void { + instance.on('dataviewchanged', function ($event) { + context.emit('dataviewchanged', $event); + }); + } + + function onMagicTypeChanged(): void { + instance.on('magictypechanged', function ($event) { + context.emit('magictypechanged', $event); + }); + } + + return { + onRestore, + onDataViewChanged, + onMagicTypeChanged + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-tree-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-tree-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..fc077c83cd3eaea28dfbf922e59ca369b364e111 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-tree-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseTreeEvent } from './type'; + +export function useTreeEvent(instance: any, context: SetupContext): UseTreeEvent { + function onTreeroam(): void { + instance.on('treeroam', function ($event) { + context.emit('treeroam', $event); + }); + } + + return { + onTreeroam + }; +} diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-visualmap-event.ts b/packages/charts-vue/components/charts-common/src/compositions/use-visualmap-event.ts new file mode 100644 index 0000000000000000000000000000000000000000..92c1de881fd2cff1f3b9d4cdd3d591627176db21 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-visualmap-event.ts @@ -0,0 +1,14 @@ +import { SetupContext } from 'vue'; +import { UseVisualMapEvent } from './type'; + +export function useVisualMapEvent(instance: any, context: SetupContext): UseVisualMapEvent { + function onDataRangeSelected(): void { + instance.on('datarangeselected', function ($event) { + context.emit('datarangeselected', $event); + }); + } + + return { + onDataRangeSelected + }; +} diff --git a/packages/charts-vue/components/charts-common/src/props/common/animation.props.ts b/packages/charts-vue/components/charts-common/src/props/common/animation.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..4487045e938d58ae0262ce14f11afc390089d627 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/animation.props.ts @@ -0,0 +1,16 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const animationProps = { + /** 是否开启动画。 */ + animation: { type: Boolean, default: true }, + /** 是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。 */ + animationThreshold: { type: Number, default: 2000 }, + /** 初始动画的时长,支持回调函数 */ + animationDuration: { type: Number, default: 1000 }, + /** 初始动画的缓动效果 */ + animationEasingUpdate: { type: String, default: 'linear' }, + /** 初始动画的延迟,支持回调函数 */ + animationDelayUpdate: { type: [Number, Function] } +}; + +export type AnimationProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/axis.props.ts b/packages/charts-vue/components/charts-common/src/props/common/axis.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..fbc4ef8994cfaf4d1db1e9c6a22cf1f1231cba8f --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/axis.props.ts @@ -0,0 +1,211 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { AlignLabelType, AlignType, AxisPointerType, AxisType, BorderType, FontStyleType, FontWeightType, LocationType, OverFlowType, PositionType, VerticalAlignType } from '../type/common.type'; +import { TextStyleProps } from './textstyle.props'; +import { LineStyleProps } from './legend.props'; +import { TooltipProps } from './grid.props'; +import { AreaStyleProps } from './datazoom.props'; +import { LabelProps } from './label.props'; + +export const nameTruncateProps = { + maxWidth: { type: Number }, + + ellipsis: { type: String } +}; + +export type NameTruncateProps = ExtractPropTypes; + +export const axisLineProps = { + show: { type: Boolean, default: true }, + + onZero: { type: Boolean, default: true }, + + onZeroAxisIndex: { type: Number }, + + symbol: { type: String, Array, default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + lineStyle: { type: Object as PropType } +}; + +export type AxisLineProps = ExtractPropTypes; + +export const axisTickProps = { + show: { type: Boolean, default: true }, + + alignWithLabel: { type: Boolean, default: false }, + + interval: { type: [Number, Function], default: 'auto' }, + + inside: { type: Boolean, default: false }, + + length: { type: Number, default: 5 }, + + lineStyle: { type: Object as PropType } +}; + +export type AxisTickProps = ExtractPropTypes; + +export const axisLabelProps = { + show: { type: Boolean, default: true }, + + interval: { type: [Number, Function], default: 'auto' }, + + inside: { type: Boolean, default: false }, + + rotate: { type: Number, default: 0 }, + + margin: { type: Number, default: 8 }, + + formatter: { type: [String, Function] }, + + showMinLabel: { type: Boolean, default: null }, + + showMaxLabel: { type: Boolean, default: null }, + + alignMinLabel: { type: String as PropType, default: null }, + + alignMaxLabel: { type: String as PropType, default: null }, + + hideOverlap: { type: Boolean }, + + customValues: { type: Array }, + + color: { type: Function as PropType<(val: string) => string> }, + + fontStyle: { type: String as PropType }, + + fontWeight: { type: String as PropType , Number }, + + fontFamily: { type: String }, + + fontSize: { type: Number }, + + width: { type: Number }, + + height: { type: Number }, + + align: { type: String as PropType }, + + verticalAlign: { type: String as PropType }, + + borderColor: { type: String }, + + borderWidth: { type: Number }, + + borderType: { type: String as PropType }, + + borderRadius: { type: Number }, + + padding: { type: [Number, Array] }, + + overflow: { type: String as PropType } +}; + +export type AxisLabelProps = ExtractPropTypes; + +export const splitAreaProps = { + show: { type: Boolean }, + + interval: { type: [Number, Function], default: 'auto' }, + + areaStyle: { type: Object as PropType }, +}; + +export type SplitAreaProps = ExtractPropTypes; + +export const axisPointerProps = { + show: { type: Boolean }, + + type: { type: String as PropType }, + + snap: { type: Boolean }, + + z: { type: Number }, + + label: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + triggerEmphasis: { type: Boolean, default: true }, + + triggerTooltip: { type: Boolean, default: true }, + + value: { type: Number } +}; + +export type AxisPointerProps = ExtractPropTypes; + +export const axisProps = { + id: { type: String }, + + show: { type: Boolean, default: true }, + + gridIndex: { type: Number, default: 0 }, + + alignTicks: { type: Boolean, default: false }, + + position: { type: String as PropType }, + + offset: { type: Number, default: 0 }, + + type: { type: String as PropType, default: 'value' }, + + name: { type: String }, + + nameLocation: { type: String as PropType, default: 'end' }, + + nameTextStyle: { type: Object as PropType }, + + nameGap: { type: Number }, + + nameRotate: { type: Number }, + + nameTruncate: { type: Object as PropType }, + + inverse: { type: Boolean, default: false }, + + boundaryGap: { type: [Boolean, Array] }, + + min: { type: [Number, String, Function] }, + + max: { type: [Number, String, Function] }, + + scale: { type: Boolean, default: false }, + + splitNumber: { type: Number, default: 5 }, + + minInterval: { type: Number }, + + maxInterval: { type: Number }, + + logBase: { type: Number, default: 10 }, + + startValue: { type: Number }, + + silent: { type: Boolean, default: false }, + + triggerEvent: { type: Boolean, default: false }, + + axisLine: { type: Object as ExtractPropTypes }, + + axisTick: { type: Object as PropType }, + + axisLabel: { type: Object as PropType }, + + splitArea: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + axisPointer: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + data: { type: Array } +}; + +export type AxisProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/blur.props.ts b/packages/charts-vue/components/charts-common/src/props/common/blur.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..c96792d5a281c2f4dbffb3b77af9dc6de14f9d74 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/blur.props.ts @@ -0,0 +1,20 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LabelProps } from './label.props'; +import { LabelLineProps } from './labelline.props'; +import { ItemStyleProps } from './itemstyle.props'; +import { LineStyleProps } from './legend.props'; +import { AreaStyleProps } from './datazoom.props'; + +export const blurProps = { + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + areaStyle: { type: Object as PropType } +}; + +export type BlurProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/border.props.ts b/packages/charts-vue/components/charts-common/src/props/common/border.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..d13cf386fdf190a8708a496392b86eb287d6b320 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/border.props.ts @@ -0,0 +1,15 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const borderProps = { + borderColor: { type: String }, + + borderWidth: { type: Number }, + /** 边框类型: solid dashed dotted */ + borderType: { type: [String, Number, Array] }, + + borderDashOffset: { type: Number }, + + borderRadius: { type: [Number, Array] } +}; + +export type BorderProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/data.props.ts b/packages/charts-vue/components/charts-common/src/props/common/data.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..0361289f10250e1d0709d4bd5a11b23f32ba0c3c --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/data.props.ts @@ -0,0 +1,39 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LabelProps } from './label.props'; +import { LabelLineProps } from './labelline.props'; +import { ItemStyleProps } from './itemstyle.props'; +import { BlurProps } from './blur.props'; +import { TooltipProps } from './grid.props'; +import { SelectProps } from './select.props'; + +export const dataProps = { + name: { type: String }, + + value: { type: String }, + + groupId: { type: String }, + + childGroupId: { type: String }, + + symbol: { type: [String, Array], default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + symbolRotate: { type: Number }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + blur: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + select: { type: Object as PropType } +}; + +export type DataProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/datazoom.props.ts b/packages/charts-vue/components/charts-common/src/props/common/datazoom.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..e71620e1cf3fc5eb97d89c80f7aff6b42935f658 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/datazoom.props.ts @@ -0,0 +1,89 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LineStyleProps } from './legend.props'; +import { TextStyleProps } from './textstyle.props'; + +export const areaStyleProps = { + color: { type: String }, + + opacity: { type: Number } +}; + +export type AreaStyleProps = ExtractPropTypes; + +export const dataBackgroundProps = { + color: { type: String }, + + width: { type: Number }, + + type: { type: [String, Number, Array] }, + + lineStyle: { type: Object as PropType }, + + areaStyle: { type: Object as PropType }, +}; + +export type DataBackgroundProps = ExtractPropTypes; + +export const selectedDataBackgroundProps = { + lineStyle: { type: Object as PropType }, + + areaStyle: { type: Object as PropType } +}; + +export type SelectedDataBackgroundProps = ExtractPropTypes; + +export const dataZoomProps = { + type: { type: String, default: 'slider' }, + + id: { type: String }, + + show: { type: Boolean, default: true }, + + backgroundColor: { type: String }, + + dataBackground: { type: Object as PropType }, + + selectedDataBackground: { type: Object as PropType }, + + fillerColor: { type: String }, + + borderColor: { type: String }, + + borderRadius: { type: Number }, + + showDetails: { type: Boolean, default: true }, + + realtime: { type: Boolean, default: true }, + + textStyle: { type: Object as PropType }, + + xAxisIndex: { type: [Number, Array] }, + + yAxisIndex: { type: [Number, Array] }, + + start: { type: Number }, + + end: { type: Number }, + + minSpan: { type: Number }, + + maxSpan: { type: Number }, + + zlevel: { type: Number }, + + z: { type: Number }, + + top: { type: [String, Number] }, + + bottom: { type: [String, Number] }, + + left: { type: [String, Number] }, + + right: { type: [String, Number] }, + + width: { type: [String, Number] }, + + height: { type: [String, Number] }, +}; + +export type DataZoomProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/grid.props.ts b/packages/charts-vue/components/charts-common/src/props/common/grid.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..cf066a7d0456d437d693e0b4b6c1502c180260bc --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/grid.props.ts @@ -0,0 +1,56 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { TriggerType } from '../type/common.type'; + +export const tooltipProps = { + show: { type: Boolean, default: true }, + + padding: { type: Array as unknown as PropType }, + + trigger: { type: String as PropType , default: 'item' }, + + formatter: { type: [String, Function] }, + + valueFormatter: { type: Object as PropType<(value: number | string, dataIndex: number) => string> }, + + backgroundColor: { type: String }, + + borderColor: { type: String }, + + borderWidth: { type: Number } +}; + +export type TooltipProps = ExtractPropTypes; + +export const gridProps = { + id: { type: String }, + + show: { type: Boolean, default: true }, + + zlevel: { type: Number }, + + z: { type: Number }, + + top: { type: [String, Number] }, + + bottom: { type: [String, Number] }, + + left: { type: [String, Number] }, + + right: { type: [String, Number] }, + + width: { type: [String, Number] }, + + height: { type: [String, Number] }, + + containLabel: { type: Boolean }, + + backgroundColor: { type: String }, + + borderColor: { type: String }, + + borderWidth: { type: Number }, + + tooltip: { type: Object as PropType } +}; + +export type GridProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/itemstyle.props.ts b/packages/charts-vue/components/charts-common/src/props/common/itemstyle.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..badab5b84466ea83486abcc8532804f55c6f994b --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/itemstyle.props.ts @@ -0,0 +1,18 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { BorderType } from '../type/common.type'; + +export const itemStyleProps = { + color: { type: String, default: 'auto' }, + + borderColor: { type: String }, + + borderWidth: { type: Number }, + + borderType: { type: String as PropType }, + + borderRadius: { type: Number }, + + opacity: { type: Number } +}; + +export type ItemStyleProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/label.props.ts b/packages/charts-vue/components/charts-common/src/props/common/label.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..ed4d880438abf2bd6a781176ef4f4910f02d243b --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/label.props.ts @@ -0,0 +1,48 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { AlignType, BorderType, FontStyleType, FontWeightType, OverFlowType, PositionType, VerticalAlignType } from '../type/common.type'; + +export const labelProps = { + show: { type: Boolean, default: false }, + + distance: { type: Number, default: 5 }, + + rotate: { type: Number }, + + offset: { type: Array }, + + formatter: { type: [String, Function] }, + + color: { type: String }, + + fontStyle: { type: String as PropType }, + + fontWeight: { type: [String as PropType , Number] }, + + fontFamily: { type: String }, + + fontSize: { type: Number }, + + align: { type: String as PropType }, + + verticalAlign: { type: String as PropType }, + + borderColor: { type: String }, + + borderWidth: { type: Number }, + + borderType: { type: String as PropType }, + + borderRadius: { type: Number }, + + padding: { type: [Number, Array] }, + + width: { type: Number }, + + height: { type: Number }, + + overflow: { type: String as PropType }, + + position: { type: String as PropType } +}; + +export type LabelProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/labellayout.props.ts b/packages/charts-vue/components/charts-common/src/props/common/labellayout.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..e789d3c3cd9c2d0263a690a98ce164470b067c0e --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/labellayout.props.ts @@ -0,0 +1,34 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { AlignType, MoveOverlapType, VerticalAlignType } from '../type/common.type'; + +export const labelLayoutProps = { + hideOverlap: { type: Boolean }, + + moveOverlap: { type: String as PropType }, + + x: { type: [String, Number] }, + + y: { type: [String, Number] }, + + dx: { type: Number }, + + dy: { type: Number }, + + rotate: { type: Number }, + + width: { type: Number }, + + height: { type: Number }, + + align: { type: String as PropType }, + + verticalAlign: { type: String as PropType }, + + fontSize: { type: Number }, + + draggable: { type: Boolean }, + + labelLinePoints: { type: Array } +}; + +export type LabelLayoutProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/labelline.props.ts b/packages/charts-vue/components/charts-common/src/props/common/labelline.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..3064b42682c7491f776f5b1375965f7c052f9879 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/labelline.props.ts @@ -0,0 +1,10 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LineStyleProps } from './legend.props'; + +export const labelLineProps = { + show: { type: Boolean }, + + lineStyle: { type: Object as PropType } +}; + +export type LabelLineProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/legend.props.ts b/packages/charts-vue/components/charts-common/src/props/common/legend.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..be320467cc5c0a7e7b7cbea5ac1979547528bd35 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/legend.props.ts @@ -0,0 +1,85 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LegendType, AlignType, OrientType, BorderType, CapType, JoinType } from '../type/common.type'; +import { TextStyleProps } from './textstyle.props'; +import { ItemStyleProps } from './itemstyle.props'; +import { TooltipProps } from './grid.props'; + +export const lineStyleProps = { + color: { type: String }, + + width: { type: Number }, + + type: { type: String as PropType }, + + dashOffset: { type: Number }, + + cap: { type: String as PropType }, + + join: { type: String as PropType }, + + opacity: { type: Number } +}; + +export type LineStyleProps = ExtractPropTypes; + +export const legendDataProps = { + name: { type: String }, + + icon: { type: String }, + + value: { type: String }, + + textStyle: { type: Object as ExtractPropTypes } +}; + +export type LegendDataProps = ExtractPropTypes; + +export const legendProps = { + id: { type: String }, + + show: { type: Boolean, default: true }, + + type: { type: String as PropType }, + + top: { type: [String, Number], default: 'auto' }, + + bottom: { type: [String, Number], default: 'auto' }, + + left: { type: [String, Number], default: 'auto' }, + + right: { type: [String, Number], default: 'auto' }, + + width: { type: [String, Number], default: 'auto' }, + + height: { type: [String, Number], default: 'auto' }, + + orient: { type: String as PropType }, + + align: { type: String as PropType, default: 'auto' }, + + itemGap: { type: Number, default: 10 }, + + itemWidth: { type: Number, default: 25 }, + + itemHeight: { type: Number, default: 14 }, + + itemStyle: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + formatter: { type: [String, Function as PropType<(name: string) => string>] }, + + selectedMode: { type: Boolean, default: true }, + + textStyle: { type: Object as PropType }, + + tooltip: { type: Object as PropType, default: true }, + + icon: { type: String }, + + data: { type: Array }, + + borderRadius: { type: [String, Number] } +}; + +export type LegendProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/select.props.ts b/packages/charts-vue/components/charts-common/src/props/common/select.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..be6a009fbb73c8f5c5fa306fffdfb0e98ad204a0 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/select.props.ts @@ -0,0 +1,16 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { LabelProps } from './label.props'; +import { LabelLineProps } from './labelline.props'; +import { ItemStyleProps } from './itemstyle.props'; + +export const selectProps = { + disabled: { type: Boolean }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + itemStyle: { type: Object as PropType } +}; + +export type SelectProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/textstyle.props.ts b/packages/charts-vue/components/charts-common/src/props/common/textstyle.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..aed62f958d2217b5436d4966777ac146c0bb5705 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/textstyle.props.ts @@ -0,0 +1,32 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { FontStyleType, FontWeightType, OverFlowType, AlignType, VerticalAlignType } from '../type/common.type'; + +export const textStyleProps = { + color: { type: String }, + + fontStyle: { type: String as PropType }, + + fontWeight: { type: String as PropType , Number }, + + fontFamily: { type: String }, + + lineHeight: { type: Number }, + + width: { type: Number }, + + height: { type: Number }, + + overflow: { type: String as PropType } +}; + +export type TextStyleProps = ExtractPropTypes; + +export const subTextStyleProps = { + ...textStyleProps, + + align: { type: String as PropType }, + + verticalAlign: { type: String as PropType } +}; + +export type SubTextStyleProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/title.props.ts b/packages/charts-vue/components/charts-common/src/props/common/title.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..09483965b0d62546e4605a52363858567922cb60 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/title.props.ts @@ -0,0 +1,44 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { SubTextStyleProps, TextStyleProps } from './textstyle.props'; +import { LinkType } from '../type/common.type'; +import { borderProps } from './border.props'; + +export const titleProps = { + id: { type: String }, + + show: { type: Boolean, default: true }, + + text: { type: String }, + + target: { type: String as PropType, default: 'blank' }, + + textStyle: { type: Object as PropType }, + + subtext: { type: String }, + + sublink: { type: String }, + + subtarget: { type: String as PropType, default: 'blank' }, + + subtextStyle: { type: Object as PropType }, + + triggerEvent: { type: Boolean, default: true }, + + padding: { type: Array as unknown as PropType }, + + itemGap: { type: Number, default: 10 }, + + top: { type: [String, Number], default: 'auto' }, + + bottom: { type: [String, Number], default: 'auto' }, + + left: { type: [String, Number], default: 'auto' }, + + right: { type: [String, Number], default: 'auto' }, + + backgroundColor: { type: String }, + + ...borderProps +}; + +export type TitleProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/common/toolbox.props.ts b/packages/charts-vue/components/charts-common/src/props/common/toolbox.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..b4f96fe37ab351f88cb6f8464903a5ea1c351550 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/common/toolbox.props.ts @@ -0,0 +1,42 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { OrientType } from '../type/common.type'; + +export const toolboxFeatureProps = { + dataZoom: { type: Object, default: {} }, + + restore: { type: Object, default: {} }, + + saveAsImage: { type: Object, default: {} }, +}; + +export type toolboxFeatureProps = ExtractPropTypes; + +export const toolboxProps = { + id: { type: String }, + + show: { type: Boolean, default: true }, + + orient: { type: String as PropType, default: 'horizontal' }, + + showTitle: { type: Boolean, default: true }, + + top: { type: [String, Number] }, + + bottom: { type: [String, Number] }, + + left: { type: [String, Number] }, + + right: { type: [String, Number] }, + + width: { type: [String, Number] }, + + height: { type: [String, Number] }, + + zlevel: { type: Number }, + + z: { type: Number }, + + feature: { type: Object as PropType } +}; + +export type ToolboxProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-common/src/props/type/common.type.ts b/packages/charts-vue/components/charts-common/src/props/type/common.type.ts new file mode 100644 index 0000000000000000000000000000000000000000..da93e56995043e8bb39e7e26bb12251a42ee0be0 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/type/common.type.ts @@ -0,0 +1,45 @@ +export type FontStyleType = 'normal' | 'italic' | 'oblique'; + +export type FontWeightType = 'normal' | 'bold' | 'bolder' | 'lighter'; + +export type OverFlowType = 'none' | 'truncate' | 'break' | 'breakAll'; + +export type AlignType = 'left' | 'center' | 'right' | 'auto'; + +export type VerticalAlignType = 'top' | 'middle' | 'bottom' | 'auto'; + +export type LinkType = 'blank' | 'self'; + +export type LegendType = 'plain' | 'scroll'; + +export type OrientType = 'horizontal' | 'vertical'; + +export type PositionType = 'top' | 'bottom'; + +export type AxisType = 'value' | 'category' | 'time' | 'log'; + +export type LocationType = 'start' | 'middle' | 'center' | 'end'; + +export type BorderType = 'solid' | 'dashed' | 'dotted'; + +export type CapType = 'butt' | 'round' | 'square'; + +export type JoinType = 'bevel' | 'round' | 'miter'; + +export type MoveOverlapType = 'shiftX' | 'shifY'; + +export type AlignLabelType = 'left' | 'center' | 'right' | null; + +export type AxisPointerType = 'line' | 'shadow' | 'none'; + +export type ColorByType = 'series' | 'data'; + +export type StackStrategyType = 'samesign' | 'all' | 'positive' | 'negative'; + +export type SelectedModeType = 'single' | 'multiple' | 'series'; + +export type SamplingType = 'lttb' | 'average' | 'min' | 'max' | 'minmax' | 'sum'; + +export type TriggerType = 'item' | 'axis' | 'none'; + +export type CombinedType = 'line' | 'bar'; diff --git a/packages/charts-vue/components/charts-common/src/theme/aurora-solidcolor.ts b/packages/charts-vue/components/charts-common/src/theme/aurora-solidcolor.ts new file mode 100644 index 0000000000000000000000000000000000000000..871f1c34b4bad46cc90701333ae085013ffe0dc1 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/aurora-solidcolor.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#5C90F9' // 0% 处的颜色 +}, { + offset: 1, color: '#5C90F9' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#04BED6' // 0% 处的颜色 +}, { + offset: 1, color: '#04BED6' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#56BF7D' // 0% 处的颜色 +}, { + offset: 1, color: '#56BF7D' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6F74DC' // 0% 处的颜色 +}, { + offset: 1, color: '#6F74DC' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#739AE1' // 0% 处的颜色 +}, { + offset: 1, color: '#739AE1' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#22C3AA' // 0% 处的颜色 +}, { + offset: 1, color: '#22C3AA' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4F79F6' // 0% 处的颜色 +}, { + offset: 1, color: '#4F79F6' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#8E7CE1' // 0% 处的颜色 +}, { + offset: 1, color: '#8E7CE1' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#8B9EC5' // 0% 处的颜色 +}, { + offset: 1, color: '#8B9EC5' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6E85B4' // 0% 处的颜色 +}, { + offset: 1, color: '#6E85B4' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const auroraSolidcolorTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/theme/aurora.ts b/packages/charts-vue/components/charts-common/src/theme/aurora.ts new file mode 100644 index 0000000000000000000000000000000000000000..4b58c5894a1bc5fee0c0e3b66c7d2e2d3ab2c1c4 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/aurora.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#5C90F9' // 0% 处的颜色 +}, { + offset: 1, color: '#5CB4F9' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#04BED6' // 0% 处的颜色 +}, { + offset: 1, color: '#19DAE2' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#56BF7D' // 0% 处的颜色 +}, { + offset: 1, color: '#69D691' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6F74DC' // 0% 处的颜色 +}, { + offset: 1, color: '#8196F9' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#739AE1' // 0% 处的颜色 +}, { + offset: 1, color: '#87AFF7' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#22C3AA' // 0% 处的颜色 +}, { + offset: 1, color: '#31DFA2' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4F79F6' // 0% 处的颜色 +}, { + offset: 1, color: '#5193EF' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#8E7CE1' // 0% 处的颜色 +}, { + offset: 1, color: '#A394FE' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#8B9EC5' // 0% 处的颜色 +}, { + offset: 1, color: '#9EBCD4' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6E85B4' // 0% 处的颜色 +}, { + offset: 1, color: '#849BC8' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const auroraTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/theme/default-solidcolor.ts b/packages/charts-vue/components/charts-common/src/theme/default-solidcolor.ts new file mode 100644 index 0000000000000000000000000000000000000000..b99bd6f785141f44c71c5d8e5571c0c9152896ca --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/default-solidcolor.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#5C90F9' // 0% 处的颜色 +}, { + offset: 1, color: '#5C90F9' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#22C3AA' // 0% 处的颜色 +}, { + offset: 1, color: '#22C3AA' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFB45A' // 0% 处的颜色 +}, { + offset: 1, color: '#FFB45A' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#7C80E1' // 0% 处的颜色 +}, { + offset: 1, color: '#7C80E1' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#1CE0E9' // 0% 处的颜色 +}, { + offset: 1, color: '#1CE0E9' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFC45C' // 0% 处的颜色 +}, { + offset: 1, color: '#FFC45C' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#87AFF7' // 0% 处的颜色 +}, { + offset: 1, color: '#87AFF7' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#72DD9A' // 0% 处的颜色 +}, { + offset: 1, color: '#72DD9A' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#D199E2' // 0% 处的颜色 +}, { + offset: 1, color: '#D199E2' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#849BC8' // 0% 处的颜色 +}, { + offset: 1, color: '#849BC8' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const defaultSolidcolorTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/theme/default.ts b/packages/charts-vue/components/charts-common/src/theme/default.ts new file mode 100644 index 0000000000000000000000000000000000000000..d98dc372d16ed8d95875db9981ccbd048bb6e0a7 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/default.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#5C90F9' // 0% 处的颜色 +}, { + offset: 1, color: '#5CB4F9' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#22C3AA' // 0% 处的颜色 +}, { + offset: 1, color: '#31DFA2' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFB45A' // 0% 处的颜色 +}, { + offset: 1, color: '#FC9657' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#7C80E1' // 0% 处的颜色 +}, { + offset: 1, color: '#8A9EFE' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#1CE0E9' // 0% 处的颜色 +}, { + offset: 1, color: '#04BED6' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFC45C' // 0% 处的颜色 +}, { + offset: 1, color: '#F1B141' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#87AFF7' // 0% 处的颜色 +}, { + offset: 1, color: '#739AE1' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#72DD9A' // 0% 处的颜色 +}, { + offset: 1, color: '#56BF7D' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#D199E2' // 0% 处的颜色 +}, { + offset: 1, color: '#BF88D0' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#849BC8' // 0% 处的颜色 +}, { + offset: 1, color: '#6E85B4' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const defaultTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/theme/sunshine-solidcolor.ts b/packages/charts-vue/components/charts-common/src/theme/sunshine-solidcolor.ts new file mode 100644 index 0000000000000000000000000000000000000000..f2b4a0c7927945f34ddb0964f2b2386ecb45588e --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/sunshine-solidcolor.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#3B91FF' // 0% 处的颜色 +}, { + offset: 1, color: '#3B91FF' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FF8B00' // 0% 处的颜色 +}, { + offset: 1, color: '#FF8B00' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#01C7C7' // 0% 处的颜色 +}, { + offset: 1, color: '#01C7C7' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFB400' // 0% 处的颜色 +}, { + offset: 1, color: '#FFB400' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4EC87A' // 0% 处的颜色 +}, { + offset: 1, color: '#4EC87A' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#878BFF' // 0% 处的颜色 +}, { + offset: 1, color: '#878BFF' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4F7CFF' // 0% 处的颜色 +}, { + offset: 1, color: '#4F7CFF' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#F47A12' // 0% 处的颜色 +}, { + offset: 1, color: '#F47A12' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#739AE1' // 0% 处的颜色 +}, { + offset: 1, color: '#739AE1' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6E85B4' // 0% 处的颜色 +}, { + offset: 1, color: '#6E85B4' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const sunshineSolidcolorTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/theme/sunshine.ts b/packages/charts-vue/components/charts-common/src/theme/sunshine.ts new file mode 100644 index 0000000000000000000000000000000000000000..77fe714611632968ba0165ddeb9df04d5e7386be --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/theme/sunshine.ts @@ -0,0 +1,79 @@ +import * as echarts from 'echarts'; + +const color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#3B91FF' // 0% 处的颜色 +}, { + offset: 1, color: '#6AC1FF' // 100% 处的颜色 +}]); + +const color2 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FF8B00' // 0% 处的颜色 +}, { + offset: 1, color: '#FFB046' // 100% 处的颜色 +}]); + +const color3 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#01C7C7' // 0% 处的颜色 +}, { + offset: 1, color: '#3CE7C8' // 100% 处的颜色 +}]); + +const color4 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#FFB400' // 0% 处的颜色 +}, { + offset: 1, color: '#EFC80A' // 100% 处的颜色 +}]); + +const color5 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4EC87A' // 0% 处的颜色 +}, { + offset: 1, color: '#58E092' // 100% 处的颜色 +}]); + +const color6 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#878BFF' // 0% 处的颜色 +}, { + offset: 1, color: '#8E9CFF' // 100% 处的颜色 +}]); + +const color7 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#4F7CFF' // 0% 处的颜色 +}, { + offset: 1, color: '#65B0FF' // 100% 处的颜色 +}]); + +const color8 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#F47A12' // 0% 处的颜色 +}, { + offset: 1, color: '#FF9373' // 100% 处的颜色 +}]); + +const color9 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#739AE1' // 0% 处的颜色 +}, { + offset: 1, color: '#87AFF7' // 100% 处的颜色 +}]); + +const color10 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, color: '#6E85B4' // 0% 处的颜色 +}, { + offset: 1, color: '#849BC8' // 100% 处的颜色 +}]); + +const colorPalette = [ + color1, + color2, + color3, + color4, + color5, + color6, + color7, + color8, + color9, + color10 +]; +export const sunshineTheme = { + color: colorPalette +}; + +// echarts.registerTheme('dark', theme); diff --git a/packages/charts-vue/components/charts-common/src/utils/with-install.ts b/packages/charts-vue/components/charts-common/src/utils/with-install.ts new file mode 100644 index 0000000000000000000000000000000000000000..3bce8e707a3f40c9a79f95a9c4a7c093f0805aa7 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/with-install.ts @@ -0,0 +1,10 @@ +import type { App, Component, Plugin } from 'vue'; + +export const withInstall = (component: T) => { + const c = component as any; + c.install = function (app: App) { + app.component(c.name, component); + }; + + return component as T & Plugin; +}; diff --git a/packages/charts-vue/components/charts-line/index.ts b/packages/charts-vue/components/charts-line/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..86e86dd5e97baae64c07cc1dec616cf4b42a1217 --- /dev/null +++ b/packages/charts-vue/components/charts-line/index.ts @@ -0,0 +1,6 @@ +import FCharstLine from './src/charts-line.component'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/charts-line.props'; +export { FCharstLine }; +export default withInstall(FCharstLine); diff --git a/packages/charts-vue/components/charts-line/src/charts-line.component.tsx b/packages/charts-vue/components/charts-line/src/charts-line.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2a3c8e5c31edb2de054629e95ad71e654ff5b03b --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/charts-line.component.tsx @@ -0,0 +1,131 @@ +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { ChartsLineProps, chartsLineProps } from './charts-line.props'; +import { ActionEventArray, DatazoomEventArray, MouseEventArray, RenderEventArray, useActionEvent, useMouseEvent, useChartsTheme, useDatazoomEvent, useRenderEvent } from '@farris/charts-vue/components/charts-common'; + +export default defineComponent({ + name: 'FChartsLine', + props: chartsLineProps, + emits: [ + ...MouseEventArray, + ...ActionEventArray, + ...DatazoomEventArray, + ...RenderEventArray + ], + setup(props: ChartsLineProps, context: SetupContext) { + const chartRef = ref(null); + let chartInstance: ECharts | null = null; + let observer: ResizeObserver | null = null; + + const { getTheme, getThemeByName, registerTheme } = useChartsTheme(); + + const initChart = () => { + registerTheme(); + + if (!chartRef.value) { + return; + } + + const theme = getTheme(); + + chartInstance = echarts.init(chartRef.value, theme, {}); + + // eslint-disable-next-line no-use-before-define + updateChart(); + + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); + onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); + + const { onHighLight, onDownPlay, onSelectChanged } = useActionEvent(chartInstance, context); + onHighLight(), onDownPlay(), onSelectChanged(); + + const { onDatazoom } = useDatazoomEvent(chartInstance, context); + onDatazoom(); + + const { onFinished, onRendered } = useRenderEvent(chartInstance, context); + onFinished(), onRendered(); + }; + + function updateChart() { + if (!chartInstance) { + return; + } + + let theme: any = null; + if (props.theme !== getTheme()) { + theme = getThemeByName(props.theme); + } + + const baseOption: any = { + ...theme, + title: props.title || {}, + grid: props.grid || {}, + xAxis: props.xAxis || {}, + yAxis: props.yAxis || {}, + tooltip: props.tooltip || {}, + legend: props.legend || {}, + toolbox: props.toolbox || {}, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'line'; + return s; + }) + }; + + chartInstance.setOption(baseOption, true); + } + + const resizeChart = () => { + if (chartInstance) { + chartInstance.resize(); + } + }; + + // 监听容器大小变化 + const initResizeObserver = () => { + observer = new ResizeObserver(() => { + resizeChart(); + }); + if (chartRef.value) { + observer.observe(chartRef.value); + } + }; + + onMounted(() => { + initChart(); + initResizeObserver(); + }); + + onBeforeUnmount(() => { + if (observer) { + observer.disconnect(); + } + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } + }); + + watch( + () => props, + () => { + updateChart(); + }, + { deep: true } + ); + + return () => ( +
+ ); + } +}); diff --git a/packages/charts-vue/components/charts-line/src/charts-line.props.ts b/packages/charts-vue/components/charts-line/src/charts-line.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..f85ec555d28d41df4ef525ac8d3c868b6479bfcb --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/charts-line.props.ts @@ -0,0 +1,121 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { + AxisProps, animationProps, ToolboxProps, DataProps, ColorByType, StackStrategyType, LabelProps, + LabelLineProps, LabelLayoutProps, ItemStyleProps, LineStyleProps, AreaStyleProps, BlurProps, + SelectProps, TooltipProps, SelectedModeType, SamplingType, TextStyleProps, LegendProps, TitleProps, + GridProps, DataZoomProps +} from '@farris/charts-vue/components/charts-common'; + +export const lineSeriesProps = { + type: { type: String, default: 'line' }, + + id: { type: String }, + + name: { type: String }, + + colorBy: { type: String as PropType }, + + xAxisIndex: { type: Number }, + + yAxisIndex: { type: Number }, + + symbol: { type: String, Array, default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + symbolRotate: { type: Number }, + + legendHoverLink: { type: Boolean, default: true }, + /** 数据堆叠,目前只支持堆叠 value 和 log */ + stack: { type: String }, + /** 堆积数值的策略,前提是stack属性已被设置 */ + stackStrategy: { type: String as PropType }, + + cursor: { type: String, default: 'pointer' }, + /** 是否裁剪超出坐标系部分的图形 */ + clip: { type: Boolean, default: true }, + + triggerLineEvent: { type: Boolean, default: false }, + + step: { type: Boolean, default: false }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + labelLayout: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + areaStyle: { type: Object as PropType }, + + blur: { type: Object as PropType }, + + select: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + selectedMode: { type: String as PropType }, + + smooth: { type: [Boolean, Number] }, + + sampling: { type: String as PropType }, + + data: { type: Object as PropType }, + /** 使用 dimensions 定义 series.data 或者 dataset.source 的每个维度的信息。 */ + dimensions: { type: Array }, + /** 可以定义 data 的哪个维度被编码成什么。 */ + encode: { type: Object }, + /** 当使用 dataset 时,seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上。column row */ + seriesLayoutBy: { type: String }, + /** 如果 series.data 没有指定,并且 dataset 存在,那么就会使用 dataset。datasetIndex 指定本系列使用哪个 dataset */ + datasetIndex: { type: Number }, + + ...animationProps +}; + +export type LineSeriesProps = ExtractPropTypes; + +export const chartsLineProps = { + title: { type: Object as PropType }, + + legend: { type: Object as PropType }, + + grid: { type: Object as PropType }, + + dataZoom: { type: Object as PropType }, + + toolbox: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + color: { type: Array }, + + backgroundColor: { type: String }, + + width: { type: [Number, String] }, + + height: { type: [Number, String] }, + + textStyle: { type: Object as PropType }, + + series: { type: Array as PropType, default: [{ ...lineSeriesProps }] }, + + xAxis: { type: Object as PropType }, + + yAxis: { type: Object as PropType }, + + theme: { type: String, default: 'defaultTheme' }, + + ...animationProps +}; + +export type ChartsLineProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-pie/index.ts b/packages/charts-vue/components/charts-pie/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..bea1f1b6cbc02979c1891d8691f0c813a7032ec8 --- /dev/null +++ b/packages/charts-vue/components/charts-pie/index.ts @@ -0,0 +1,6 @@ +import FCharstPie from './src/charts-pie.component'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/charts-pie.props'; +export { FCharstPie }; +export default withInstall(FCharstPie); diff --git a/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx b/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..aa16d6a2f472a5c8a9719d9b5ad49bc738f694d1 --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx @@ -0,0 +1,128 @@ +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { ChartsPieProps, chartsPieProps } from './charts-pie.props'; +import { ActionEventArray, DatazoomEventArray, MouseEventArray, RenderEventArray, useActionEvent, useMouseEvent, useChartsTheme, useDatazoomEvent, useRenderEvent } from '@farris/charts-vue/components/charts-common'; + +export default defineComponent({ + name: 'FChartsPie', + props: chartsPieProps, + emits: [ + ...MouseEventArray, + ...ActionEventArray, + ...DatazoomEventArray, + ...RenderEventArray + ], + setup(props: ChartsPieProps, context: SetupContext) { + const chartRef = ref(null); + let chartInstance: ECharts | null = null; + let observer: ResizeObserver | null = null; + + const { getTheme, getThemeByName, registerTheme } = useChartsTheme(); + + const initChart = () => { + registerTheme(); + + if (!chartRef.value) { + return; + } + + const theme = getTheme(); + + chartInstance = echarts.init(chartRef.value, theme, {}); + + // eslint-disable-next-line no-use-before-define + updateChart(); + + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); + onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); + + const { onHighLight, onDownPlay, onSelectChanged } = useActionEvent(chartInstance, context); + onHighLight(), onDownPlay(), onSelectChanged(); + + const { onDatazoom } = useDatazoomEvent(chartInstance, context); + onDatazoom(); + + const { onFinished, onRendered } = useRenderEvent(chartInstance, context); + onFinished(), onRendered(); + }; + + function updateChart() { + if (!chartInstance) { + return; + } + + let theme: any = null; + if (props.theme !== getTheme()) { + theme = getThemeByName(props.theme); + } + + const baseOption: any = { + ...theme, + title: props.title || {}, + grid: props.grid || {}, + tooltip: props.tooltip || {}, + legend: props.legend || {}, + toolbox: props.toolbox || {}, + animation: props.animation, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'pie'; + return s; + }) + }; + + chartInstance.setOption(baseOption, true); + } + + const resizeChart = () => { + if (chartInstance) { + chartInstance.resize(); + } + }; + + // 监听容器大小变化 + const initResizeObserver = () => { + observer = new ResizeObserver(() => { + resizeChart(); + }); + if (chartRef.value) { + observer.observe(chartRef.value); + } + }; + + onMounted(() => { + initChart(); + initResizeObserver(); + }); + + onBeforeUnmount(() => { + if (observer) { + observer.disconnect(); + } + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } + }); + + watch( + () => props, + () => { + updateChart(); + }, + { deep: true } + ); + + return () => ( +
+ ); + } +}); diff --git a/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts b/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..10d51635c310d5c7b687a3cb032e3a6804ddf347 --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts @@ -0,0 +1,108 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { + DataProps, ColorByType, StackStrategyType, LabelProps, LabelLineProps, LabelLayoutProps, ItemStyleProps, + animationProps, ToolboxProps, BlurProps, SelectProps, TooltipProps, SelectedModeType, SamplingType, + TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps +} from '@farris/charts-vue/components/charts-common'; + +export const pieSeriesProps = { + type: { type: String, default: 'pie' }, + + id: { type: String }, + + name: { type: String }, + + colorBy: { type: String as PropType }, + + symbol: { type: String, Array, default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + symbolRotate: { type: Number }, + + legendHoverLink: { type: Boolean, default: true }, + /** 数据堆叠,目前只支持堆叠 value 和 log */ + stack: { type: String }, + /** 堆积数值的策略,前提是stack属性已被设置 */ + stackStrategy: { type: String as PropType }, + + cursor: { type: String, default: 'pointer' }, + /** 是否裁剪超出坐标系部分的图形 */ + clip: { type: Boolean, default: true }, + + triggerLineEvent: { type: Boolean, default: false }, + + step: { type: Boolean, default: false }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + labelLayout: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + blur: { type: Object as PropType }, + + select: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + selectedMode: { type: String as PropType }, + + smooth: { type: [Boolean, Number] }, + + sampling: { type: String as PropType }, + + data: { type: Object as PropType }, + /** 使用 dimensions 定义 series.data 或者 dataset.source 的每个维度的信息。 */ + dimensions: { type: Array }, + /** 可以定义 data 的哪个维度被编码成什么。 */ + encode: { type: Object }, + /** 当使用 dataset 时,seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上。column row */ + seriesLayoutBy: { type: String }, + /** 如果 series.data 没有指定,并且 dataset 存在,那么就会使用 dataset。datasetIndex 指定本系列使用哪个 dataset */ + datasetIndex: { type: Number }, + + ...animationProps +}; + +export type PieSeriesProps = ExtractPropTypes; + +export const chartsPieProps = { + title: { type: Object as PropType }, + + legend: { type: Object as PropType }, + + grid: { type: Object as PropType }, + + dataZoom: { type: Object as PropType }, + + toolbox: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + color: { type: Array }, + + backgroundColor: { type: String }, + + width: { type: [String, Number] }, + + height: { type: [String, Number] }, + + textStyle: { type: Object as PropType }, + + series: { type: Array as PropType, default: [{ ...pieSeriesProps }] }, + + theme: { type: String, default: 'defaultTheme' }, + + ...animationProps +}; + +export type ChartsPieProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-process-gauge/index.ts b/packages/charts-vue/components/charts-process-gauge/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..d53242c11e5b2373c3711f320badd4c26ae52ad0 --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/index.ts @@ -0,0 +1,6 @@ +import FChartsProcessGauge from './src/charts-process-gauge.component'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/charts-process-gauge.props'; +export { FChartsProcessGauge }; +export default withInstall(FChartsProcessGauge); diff --git a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..23a9c76fff6a44856a780a71bfa64f8ee86a1f53 --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx @@ -0,0 +1,129 @@ +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { ChartsProcessGaugeProps, chartsProcessGaugeProps } from './charts-process-gauge.props'; +import { ActionEventArray, DatazoomEventArray, MouseEventArray, RenderEventArray, useActionEvent, useMouseEvent, useChartsTheme, useDatazoomEvent, useRenderEvent } from '@farris/charts-vue/components/charts-common'; + +export default defineComponent({ + name: 'FChartsProcessGauge', + props: chartsProcessGaugeProps, + emits: [ + ...MouseEventArray, + ...ActionEventArray, + ...DatazoomEventArray, + ...RenderEventArray + ], + setup(props: ChartsProcessGaugeProps, context: SetupContext) { + const chartRef = ref(null); + let chartInstance: ECharts | null = null; + let observer: ResizeObserver | null = null; + + const { getTheme, getThemeByName, registerTheme } = useChartsTheme(); + + const initChart = () => { + registerTheme(); + + if (!chartRef.value) { + return; + } + + const theme = getTheme(); + + chartInstance = echarts.init(chartRef.value, theme, {}); + + // eslint-disable-next-line no-use-before-define + updateChart(); + + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); + onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); + + const { onHighLight, onDownPlay, onSelectChanged } = useActionEvent(chartInstance, context); + onHighLight(), onDownPlay(), onSelectChanged(); + + const { onDatazoom } = useDatazoomEvent(chartInstance, context); + onDatazoom(); + + const { onFinished, onRendered } = useRenderEvent(chartInstance, context); + onFinished(), onRendered(); + }; + + function updateChart() { + if (!chartInstance) { + return; + } + + let theme: any = null; + if (props.theme !== getTheme()) { + theme = getThemeByName(props.theme); + } + + const baseOption: any = { + ...theme, + title: props.title || {}, + grid: props.grid || {}, + tooltip: props.tooltip || {}, + legend: props.legend || {}, + toolbox: props.toolbox || {}, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'gauge'; + return s; + }) + }; + + chartInstance.setOption(baseOption, true); + } + + const resizeChart = () => { + if (chartInstance) { + chartInstance.resize(); + } + }; + + // 监听容器大小变化 + const initResizeObserver = () => { + observer = new ResizeObserver(() => { + resizeChart(); + }); + if (chartRef.value) { + observer.observe(chartRef.value); + } + }; + + onMounted(() => { + initChart(); + initResizeObserver(); + }); + + onBeforeUnmount(() => { + if (observer) { + observer.disconnect(); + } + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } + }); + + watch( + () => props, + () => { + updateChart(); + }, + { deep: true } + ); + + return () => ( +
+ ); + } +}); diff --git a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..b8e777683269f1f72b0a11c39da4c946117477ac --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts @@ -0,0 +1,159 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { + DataProps, ColorByType, ItemStyleProps, TooltipProps, TextStyleProps, LegendProps, TitleProps, + GridProps, DataZoomProps, LineStyleProps, textStyleProps, borderProps, AxisLabelProps, animationProps, + ToolboxProps +} from '@farris/charts-vue/components/charts-common'; + +export const gaugeAxisLineProps = { + show: { type: Boolean, default: true }, + + roundCap: { type: Boolean, default: true }, + + lineStyle: { type: Object as PropType<{ show: true, width: 30}> } +}; + +export type GaugeAxisLineProps = ExtractPropTypes; + +export const progressProps = { + show: { type: Boolean, default: true }, + + width: { type: Number, default: 30 }, + + roundCap: { type: Boolean, default: true }, + + overlap: { type: Boolean, default: true }, + + itemStyle: { type: Object as PropType } +}; + +export type ProgressProps = ExtractPropTypes; + +export const splitLineProps = { + show: { type: Boolean, default: false }, + + length: { type: Number, default: 10 }, + + distance: { type: Number, default: 10 }, + + lineStyle: { type: Object as PropType } +}; + +export type SplitLineProps = ExtractPropTypes; + +export const axisTickProps = { + show: { type: Boolean, default: false }, + + length: { type: Number }, + + splitNumber: { type: Number }, + + distance: { type: Number }, + + lineStyle: { type: Object as PropType } +}; + +export type AxisTickProps = ExtractPropTypes; + +export const detailProps = { + ...textStyleProps, + ...borderProps, + + show: { type: Boolean, default: true }, + + color: { type: String }, + + padding: { type: Number }, + + overflow: { type: String, default: 'none' }, + + formatter: { type: [Function, String] }, + + valueAnimation: { type: Boolean, default: true } +}; + +export type DetailProps = ExtractPropTypes; + +export const processGaugeSeriesProps = { + type: { type: String, default: 'gauge' }, + + id: { type: String }, + + name: { type: String }, + + colorBy: { type: String as PropType }, + + startAngle: { type: Number, default: 220 }, + + endAngle: { type: Number, default: -40 }, + + min: { type: Number, default: 0 }, + + max: { type: Number, default: 100 }, + + splitNumber: { type: Number, default: 100 }, + + clockwise: { type: Boolean, default: true }, + + legendHoverLink: { type: Boolean, default: true }, + + cursor: { type: String, default: 'pointer' }, + + itemStyle: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + axisLine: { type: Object as PropType }, + + process: { type: Object as PropType }, + + splitLine: { type: Object as PropType }, + + axisTick: { type: Object as PropType }, + + axisLabel: { type: Object as PropType }, + + detail: { type: Object as PropType }, + + data: { type: Object as PropType }, + + ...animationProps +}; + +export type ProcessGaugeSeriesProps = ExtractPropTypes; + +export const chartsProcessGaugeProps = { + title: { type: Object as PropType }, + + legend: { type: Object as PropType }, + + grid: { type: Object as PropType }, + + dataZoom: { type: Object as PropType }, + + toolbox: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + color: { type: Array }, + + backgroundColor: { type: String }, + + width: { type: [Number, String] }, + + height: { type: [Number, String] }, + + textStyle: { type: Object as PropType }, + + series: { type: Array as PropType, default: [{ ...processGaugeSeriesProps }] }, + + theme: { type: String, default: 'defaultTheme' }, + + ...animationProps +}; + +export type ChartsProcessGaugeProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/charts-scatter/index.ts b/packages/charts-vue/components/charts-scatter/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..2a9684bb46beaba64cd124aa8190306b6082241f --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/index.ts @@ -0,0 +1,6 @@ +import FCharstScatter from './src/charts-scatter.component'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/charts-scatter.props'; +export { FCharstScatter }; +export default withInstall(FCharstScatter); diff --git a/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx b/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..b96703205514adea970cbbab48b685fb12f0373f --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx @@ -0,0 +1,131 @@ +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { ChartsScatterProps, chartsScatterProps } from './charts-scatter.props'; +import { ActionEventArray, DatazoomEventArray, MouseEventArray, RenderEventArray, useActionEvent, useMouseEvent, useChartsTheme, useDatazoomEvent, useRenderEvent } from '@farris/charts-vue/components/charts-common'; + +export default defineComponent({ + name: 'FChartsScatter', + props: chartsScatterProps, + emits: [ + ...MouseEventArray, + ...ActionEventArray, + ...DatazoomEventArray, + ...RenderEventArray + ], + setup(props: ChartsScatterProps, context: SetupContext) { + const chartRef = ref(null); + let chartInstance: ECharts | null = null; + let observer: ResizeObserver | null = null; + + const { getTheme, getThemeByName, registerTheme } = useChartsTheme(); + + const initChart = () => { + registerTheme(); + + if (!chartRef.value) { + return; + } + + const theme = getTheme(); + + chartInstance = echarts.init(chartRef.value, theme, {}); + + // eslint-disable-next-line no-use-before-define + updateChart(); + + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); + onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); + + const { onHighLight, onDownPlay, onSelectChanged } = useActionEvent(chartInstance, context); + onHighLight(), onDownPlay(), onSelectChanged(); + + const { onDatazoom } = useDatazoomEvent(chartInstance, context); + onDatazoom(); + + const { onFinished, onRendered } = useRenderEvent(chartInstance, context); + onFinished(), onRendered(); + }; + + function updateChart() { + if (!chartInstance) { + return; + } + + let theme: any = null; + if (props.theme !== getTheme()) { + theme = getThemeByName(props.theme); + } + + const baseOption: any = { + ...theme, + title: props.title || {}, + grid: props.grid || {}, + tooltip: props.tooltip || {}, + legend: props.legend || {}, + toolbox: props.toolbox || {}, + xAxis: props.xAxis || {}, + yAxis: props.yAxis || {}, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'scatter'; + return s; + }) + }; + + chartInstance.setOption(baseOption, true); + } + + const resizeChart = () => { + if (chartInstance) { + chartInstance.resize(); + } + }; + + // 监听容器大小变化 + const initResizeObserver = () => { + observer = new ResizeObserver(() => { + resizeChart(); + }); + if (chartRef.value) { + observer.observe(chartRef.value); + } + }; + + onMounted(() => { + initChart(); + initResizeObserver(); + }); + + onBeforeUnmount(() => { + if (observer) { + observer.disconnect(); + } + if (chartInstance) { + chartInstance.dispose(); + chartInstance = null; + } + }); + + watch( + () => props, + () => { + updateChart(); + }, + { deep: true } + ); + + return () => ( +
+ ); + } +}); diff --git a/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts b/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..ee3d0d6d9d8891e1044625d51fcf5fa28399cfac --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts @@ -0,0 +1,124 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import { + DataProps, ColorByType, StackStrategyType, LabelProps, LabelLineProps, LabelLayoutProps, ItemStyleProps, + LineStyleProps, animationProps, BlurProps, SelectProps, TooltipProps, SelectedModeType, SamplingType, + TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps, AxisProps, ToolboxProps +} from '@farris/charts-vue/components/charts-common'; + +export const scatterSeriesProps = { + type: { type: String, default: 'scatter' }, + + id: { type: String }, + + name: { type: String }, + + colorBy: { type: String as PropType }, + + xAxisIndex: { type: Number }, + + yAxisIndex: { type: Number }, + + polarIndex: { type: Number, default: 0 }, + + geoIndex: { type: Number, default: 0 }, + + calendarIndex: { type: Number, default: 0 }, + + symbol: { type: String, Array, default: 'none' }, + + symbolSize: { type: Array }, + + symbolOffset: { type: Array }, + + symbolRotate: { type: Number }, + + legendHoverLink: { type: Boolean, default: true }, + /** 数据堆叠,目前只支持堆叠 value 和 log */ + stack: { type: String }, + /** 堆积数值的策略,前提是stack属性已被设置 */ + stackStrategy: { type: String as PropType }, + + cursor: { type: String, default: 'pointer' }, + /** 是否裁剪超出坐标系部分的图形 */ + clip: { type: Boolean, default: true }, + + triggerLineEvent: { type: Boolean, default: false }, + + step: { type: Boolean, default: false }, + + label: { type: Object as PropType }, + + labelLine: { type: Object as PropType }, + + labelLayout: { type: Object as PropType }, + + itemStyle: { type: Object as PropType }, + + lineStyle: { type: Object as PropType }, + + // areaStyle: { type: Object as PropType }, + + blur: { type: Object as PropType }, + + select: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + zlevel: { type: Number }, + + z: { type: Number }, + + selectedMode: { type: String as PropType }, + + sampling: { type: String as PropType }, + + data: { type: Object as PropType }, + /** 使用 dimensions 定义 series.data 或者 dataset.source 的每个维度的信息。 */ + dimensions: { type: Array }, + /** 可以定义 data 的哪个维度被编码成什么。 */ + encode: { type: Object }, + /** 当使用 dataset 时,seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上。column row */ + seriesLayoutBy: { type: String }, + /** 如果 series.data 没有指定,并且 dataset 存在,那么就会使用 dataset。datasetIndex 指定本系列使用哪个 dataset */ + datasetIndex: { type: Number }, + + ...animationProps +}; + +export type ScatterSeriesProps = ExtractPropTypes; + +export const chartsScatterProps = { + title: { type: Object as PropType }, + + legend: { type: Object as PropType }, + + grid: { type: Object as PropType }, + + dataZoom: { type: Object as PropType }, + + toolbox: { type: Object as PropType }, + + tooltip: { type: Object as PropType }, + + color: { type: Array }, + + backgroundColor: { type: String }, + + width: { type: [String, Number] }, + + height: { type: [String, Number] }, + + textStyle: { type: Object as PropType }, + + xAxis: { type: Object as PropType }, + + yAxis: { type: Object as PropType }, + + series: { type: Array as PropType, default: [{ ...scatterSeriesProps }] }, + + theme: { type: String, default: 'defaultTheme' }, + + ...animationProps +}; + +export type ChartsScatterProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/components.ts b/packages/charts-vue/components/components.ts new file mode 100644 index 0000000000000000000000000000000000000000..686107de93f51514fcf6c6a5961e1800e24c491a --- /dev/null +++ b/packages/charts-vue/components/components.ts @@ -0,0 +1,12 @@ +export { default as FGridLayoutWrapper } from './grid-layout'; +export type { GridLayoutProps } from './grid-layout'; +export { default as FChartsLine } from './charts-line'; +export type { ChartsLineProps } from './charts-line'; +export { default as FCharstPie } from './charts-pie'; +export type { ChartsPieProps } from './charts-pie'; +export { default as FCharstScatter } from './charts-scatter'; +export type { ChartsScatterProps } from './charts-scatter'; +export { default as FChartsProcessGauge } from './charts-process-gauge'; +export type { ChartsProcessGaugeProps } from './charts-process-gauge'; +export { default as FCharstCombined } from './charts-combined'; +export type { ChartsCombinedProps } from './charts-combined'; diff --git a/packages/charts-vue/components/grid-layout/index.ts b/packages/charts-vue/components/grid-layout/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..57f8bb62dd8b069c59802cb4d9d06fe55d1fd509 --- /dev/null +++ b/packages/charts-vue/components/grid-layout/index.ts @@ -0,0 +1,25 @@ + +/** + * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import FGridLayoutWrapper from './src/gridlayoutwrapper.component'; +import LayoutItem from './src/composition/type'; +import { withInstall } from '@farris/charts-vue/components/charts-common'; + +export * from './src/gridlayout.props'; + +export { FGridLayoutWrapper }; +export type { LayoutItem }; +export default withInstall(FGridLayoutWrapper); diff --git a/packages/charts-vue/components/grid-layout/src/composition/type.ts b/packages/charts-vue/components/grid-layout/src/composition/type.ts new file mode 100644 index 0000000000000000000000000000000000000000..fbc0c09724706adbb6532071c8bea792798371a5 --- /dev/null +++ b/packages/charts-vue/components/grid-layout/src/composition/type.ts @@ -0,0 +1,37 @@ + +/** + * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * row: 在栅栏布局中第几行 + * column:在栅栏布局中第几列 + * width:在栅栏布局中元素初始宽度 + * height:在栅栏布局中元数初始高度 + */ +export default interface LayoutItem { + x: number + y: number + w: number + h: number + i: string | number + minW?: number + maxW?: number + minH?: number + maxH?: number + draggable?: boolean + resizable?: boolean + [key: string]: any +}; diff --git a/packages/charts-vue/components/grid-layout/src/gridlayout.props.ts b/packages/charts-vue/components/grid-layout/src/gridlayout.props.ts new file mode 100644 index 0000000000000000000000000000000000000000..6543601a25122f65b117d10325f57f293e4c58a6 --- /dev/null +++ b/packages/charts-vue/components/grid-layout/src/gridlayout.props.ts @@ -0,0 +1,67 @@ + +/** + * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import LayoutItem from './composition/type'; +import { ExtractPropTypes, PropType } from 'vue'; + +export const gridLayoutProps = { + /** 数据源,参与布局的item */ + layout: { + type: Array as PropType, + required: true, + validator: (value: unknown) => + Array.isArray(value) && value.every(item => + typeof item === 'object' && 'i' in item + ) + }, + /** 定义栅栏布局的列数 */ + columnNumber: { type: Number, default: 12 }, + /** 行高,单位像素 */ + rowHeight: { type: Number, default: 50 }, + /** 定义栅栏元素是否可以拖拽 */ + isDraggable: { type: Boolean, default: true }, + /** 定义栅栏元素是否可以调整大小 */ + isResizable: { type: Boolean, default: true }, + /** 定义栅格中的元素边距 */ + margin: { type: Array as unknown as PropType<[number, number]>, default: () => [10, 10] }, + /** 标识布局容器是否自动调整大小 */ + autoSize: { type: Boolean, default: true }, + /** 标识布局是否为响应式 */ + responsive: { type: Boolean, default: true }, + verticalCompact: { type: Boolean, default: true }, + useCssTransforms: { type: Boolean, default: true }, + /** 对应Vue生命周期的created */ + layoutCreatedEvent: { type: Function, default: (newLayout: any) => { } }, + /** 对应Vue生命周期的beforeMount */ + layoutBeforeMountEvent: { type: Function, default: (newLayout: any) => { } }, + /** 对应Vue生命周期的mounted */ + layoutMountedEvent: { type: Function, default: (newLayout: any) => { } }, + /** 当完成mount中的所有操作时生成的事件 */ + layoutReadyEvent: { type: Function, default: (newLayout: any) => { } }, + /** 更新事件(布局更新或栅格元素的位置重新计算) */ + layoutUpdatedEvent: { type: Function, default: (newLayout: any) => { } }, + + /** 栅栏格中元素移动时的事件 */ + moveEvent: { type: Function, default: (i, newX, newY) => { } }, + /** 栅栏格中元素调整大小时的事件 */ + resizeEvent: { type: Function, default: (i, newH, newW, newHPx, newWPx) => { } }, + /** 栅栏格中元素移动后的事件 */ + movedEvent: { type: Function, default: (i, newX, newY) => { } }, + /** 栅栏格中元素调整大小后的事件 */ + resizedEvent: { type: Function, default: (i, newH, newW, newHPx, newWPx) => { } } +} as Record; + +export type GridLayoutProps = ExtractPropTypes; diff --git a/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx b/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..100507f718ee488ed64412ec52221fa8ec1cce91 --- /dev/null +++ b/packages/charts-vue/components/grid-layout/src/gridlayoutwrapper.component.tsx @@ -0,0 +1,157 @@ + +/** + * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineComponent, SetupContext, ShallowRef, shallowRef, watch } from 'vue'; +import { GridLayout, GridItem } from "vue3-grid-layout"; +import 'vue3-grid-layout/public/app.css'; +import { gridLayoutProps, GridLayoutProps } from './gridlayout.props'; +import LayoutItem from './composition/type'; + +export default defineComponent({ + name: 'FGridLayoutWrapper', + props: gridLayoutProps, + emits: [ + 'layoutCreated', + 'layoutBeforeMount', + 'layoutMounted', + 'layoutReady', + 'update', + 'itemMove', + 'itemResize', + 'itemMoved', + 'itemResized' + ], + components: { + 'grid-layout': GridLayout, + 'grid-item': GridItem + }, + setup(props: GridLayoutProps, context: SetupContext) { + const model: ShallowRef = shallowRef([...props.layout]); + + watch( + () => props.layout, + (newLayout) => { + if (newLayout !== props.layout) { + model.value = [...newLayout]; + } + }, + { flush: 'post' } + ); + + function handleLayoutCreated(item: LayoutItem) { + const layoutItem = item as LayoutItem; + context.emit('layoutCreated', layoutItem); + } + + function handleLayoutBeforeMount(item: LayoutItem) { + const layoutItem = item as LayoutItem; + context.emit('layoutBeforeMount', layoutItem); + } + + function handleLayoutMounted(item: LayoutItem) { + const layoutItem = item as LayoutItem; + context.emit('layoutMounted', layoutItem); + } + + function handleLayoutReady(item: LayoutItem) { + const layoutItem = item as LayoutItem; + context.emit('layoutReady', layoutItem); + } + + function handleLayoutUpdatedEvent(item: LayoutItem) { + const layoutItem = item as LayoutItem; + context.emit('update', layoutItem); + } + + function moveEvent(id: any, newX: number, newY: number) { + const item = props.layout.find((item) => item.id === id); + if (item) { + const updatedItem = { ...item, x: newX, y: newY }; + context.emit('itemMove', updatedItem); + } + } + + function resizeEvent(id: any, newX: number, newY: number, newColumnWidth: number, newRowHeight: number) { + const item = props.layout.find((item) => item.id === id); + if (item) { + const updatedItem = { ...item, x: newX, y: newY, w: newColumnWidth, h: newRowHeight }; + context.emit('itemResize', updatedItem); + } + } + + function movedEvent(id: any, newX: number, newY: number) { + const item = props.layout.find((item) => item.id === id); + if (item) { + const updatedItem = { ...item, x: newX, y: newY }; + context.emit('itemMoved', updatedItem); + } + } + + function resizedEvent(id: any, newX: number, newY: number, newColumnWidth: number, newRowHeight: number) { + const item = props.layout.find((item) => item.id === id); + if (item) { + const updatedItem = { ...item, x: newX, y: newY, w: newColumnWidth, h: newRowHeight }; + context.emit('itemResized', updatedItem); + } + } + + return () => ( + + { + model.value.map(item => ( + + + + )) + } + + ); + } +}); diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..84ecad162963ee9bed606f23c5479adf89b10865 --- /dev/null +++ b/packages/charts-vue/components/index.ts @@ -0,0 +1,39 @@ +/** + * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { App } from 'vue'; +import FGridLayoutWrapper from './grid-layout'; +import FChartsLine from './charts-line'; +import FChartsPie from './charts-pie'; +import FChartsScatter from './charts-scatter'; +import FChartsProcessGauge from './charts-process-gauge'; +import FChartsCombined from './charts-combined'; +import '../public/assets/farris-all.css'; +// 导出所有组件,可以按需加载 +export * from './components'; +// 导出设计器部分组件及属性 +// export * from './designer'; + +// 不注册设计时组件 +export default { + install(app: App): void { + app.use(FGridLayoutWrapper) + .use(FChartsLine) + .use(FChartsPie) + .use(FChartsScatter) + .use(FChartsCombined) + .use(FChartsProcessGauge); + } +}; diff --git a/packages/charts-vue/demos/charts-combined/charts-combined.vue b/packages/charts-vue/demos/charts-combined/charts-combined.vue new file mode 100644 index 0000000000000000000000000000000000000000..a99c7800bedb171fb3c2d8d666b6d878a05fe993 --- /dev/null +++ b/packages/charts-vue/demos/charts-combined/charts-combined.vue @@ -0,0 +1,24 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-line/charts-line-area.vue b/packages/charts-vue/demos/charts-line/charts-line-area.vue new file mode 100644 index 0000000000000000000000000000000000000000..1debb2876dfde33cf09cbc1a37cf1441ffc56b5b --- /dev/null +++ b/packages/charts-vue/demos/charts-line/charts-line-area.vue @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-line/charts-line-rangearea.vue b/packages/charts-vue/demos/charts-line/charts-line-rangearea.vue new file mode 100644 index 0000000000000000000000000000000000000000..11f5ea8a1fc633f1b50b9be54493386ae87e65e8 --- /dev/null +++ b/packages/charts-vue/demos/charts-line/charts-line-rangearea.vue @@ -0,0 +1,25 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-line/charts-line.vue b/packages/charts-vue/demos/charts-line/charts-line.vue new file mode 100644 index 0000000000000000000000000000000000000000..bea36b389c36fbc2d83b99aeb0f7b108696ff703 --- /dev/null +++ b/packages/charts-vue/demos/charts-line/charts-line.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/charts-vue/demos/charts-pie/charts-pie-ring.vue b/packages/charts-vue/demos/charts-pie/charts-pie-ring.vue new file mode 100644 index 0000000000000000000000000000000000000000..f5ee9b434007a40a82e3488d5fe57237491ec1f4 --- /dev/null +++ b/packages/charts-vue/demos/charts-pie/charts-pie-ring.vue @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-pie/charts-pie-rose.vue b/packages/charts-vue/demos/charts-pie/charts-pie-rose.vue new file mode 100644 index 0000000000000000000000000000000000000000..87ce3a94f172ae3534c0fbdaa6c41e2faa5a6097 --- /dev/null +++ b/packages/charts-vue/demos/charts-pie/charts-pie-rose.vue @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-pie/charts-pie.vue b/packages/charts-vue/demos/charts-pie/charts-pie.vue new file mode 100644 index 0000000000000000000000000000000000000000..4569560f8f5304d7745d8234975a06e82661ef6c --- /dev/null +++ b/packages/charts-vue/demos/charts-pie/charts-pie.vue @@ -0,0 +1,17 @@ + diff --git a/packages/charts-vue/demos/charts-process-gauge/charts-process-gauge.vue b/packages/charts-vue/demos/charts-process-gauge/charts-process-gauge.vue new file mode 100644 index 0000000000000000000000000000000000000000..a73ced4dc00c8bd2e55758ad72a8cf3aff602e64 --- /dev/null +++ b/packages/charts-vue/demos/charts-process-gauge/charts-process-gauge.vue @@ -0,0 +1,57 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-scatter/charts-bubble.vue b/packages/charts-vue/demos/charts-scatter/charts-bubble.vue new file mode 100644 index 0000000000000000000000000000000000000000..55b292c20c31cfe0612385f00011c765d9feeb43 --- /dev/null +++ b/packages/charts-vue/demos/charts-scatter/charts-bubble.vue @@ -0,0 +1,79 @@ + + \ No newline at end of file diff --git a/packages/charts-vue/demos/charts-scatter/charts-scatter.vue b/packages/charts-vue/demos/charts-scatter/charts-scatter.vue new file mode 100644 index 0000000000000000000000000000000000000000..f02e41dc9fcc9fd0266d7508e853efde1db7c301 --- /dev/null +++ b/packages/charts-vue/demos/charts-scatter/charts-scatter.vue @@ -0,0 +1,26 @@ + diff --git a/packages/charts-vue/demos/grid-layout/grid-layout.vue b/packages/charts-vue/demos/grid-layout/grid-layout.vue new file mode 100644 index 0000000000000000000000000000000000000000..590975a7121d5aaa85cd03b016a0632bf64337f9 --- /dev/null +++ b/packages/charts-vue/demos/grid-layout/grid-layout.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/packages/charts-vue/docs/.vitepress/config.js b/packages/charts-vue/docs/.vitepress/config.js new file mode 100644 index 0000000000000000000000000000000000000000..e66f4a91fa66a3961659bb2dae7e84d3cd4633f1 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config.js @@ -0,0 +1,6 @@ +import 'esbuild-register' +import config from './config/index' + +const defaultConfig = config.default + +export default config; diff --git a/packages/charts-vue/docs/.vitepress/config/head.ts b/packages/charts-vue/docs/.vitepress/config/head.ts new file mode 100644 index 0000000000000000000000000000000000000000..69ff1cbf0ad35b2da6ddbda8d8782c2051855e7b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config/head.ts @@ -0,0 +1,7 @@ +import { HeadConfig } from 'vitepress'; + +const head: HeadConfig[] = [ + ['link', { rel: 'icon', type: 'image/svg+xml', href: '/assets/logo.svg' }], +]; + +export default head; diff --git a/packages/charts-vue/docs/.vitepress/config/index.ts b/packages/charts-vue/docs/.vitepress/config/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..fb6c0ab9803ced4b08d1b94d07ce96da683ae6b1 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config/index.ts @@ -0,0 +1,29 @@ +import { defineConfig } from 'vitepress'; +import head from './head'; +import nav from './nav'; +import sidebar from './sidebar'; +import markdown from './markdown'; +import { MarkdownTransform } from '../plugins/markdown-transform'; + +const config = defineConfig({ + base: '/farris-docs', + title: 'Farris Vue', + description: '基于 Farris Design 的前端组件库', + head, + markdown, + themeConfig: { + nav, + sidebar, + logo: { + dark: '/assets/farris_design_dark.png', + light: '/assets/farris_design_light.png' + }, + footer: { + message: '使用 Apache-2.0 开源许可协议', + copyright: '© 版权所有 Copyright 2023 | 浪潮数字企业', + address: '山东省济南市高新区浪潮路1036号' + } + } +}); + +export default config; diff --git a/packages/charts-vue/docs/.vitepress/config/markdown.ts b/packages/charts-vue/docs/.vitepress/config/markdown.ts new file mode 100644 index 0000000000000000000000000000000000000000..24bf3e017e6dc053f92c4bc0b2be74a7e3819233 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config/markdown.ts @@ -0,0 +1,11 @@ +import type MarkdownIt from 'markdown-it'; +import { farrisMarkdownPlugin } from '../plugins/farris-markdown-plugin'; +import { highlight as highlightFactory } from '../utils/highlight-shiki'; + +const markdown = { + config: async (md: MarkdownIt) => { + const highlight = await highlightFactory(); + md.use(farrisMarkdownPlugin, { cssPreprocessor: 'scss', highlight }); + } +}; +export default markdown; diff --git a/packages/charts-vue/docs/.vitepress/config/nav.ts b/packages/charts-vue/docs/.vitepress/config/nav.ts new file mode 100644 index 0000000000000000000000000000000000000000..ae0283dc2aab26ce10891b1aa74b733366d7fce9 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config/nav.ts @@ -0,0 +1,3 @@ +const nav = [{ text: '设计原则', link: '/' },{ text: '组件', link: '/guide/quick-start/' }]; + +export default nav; diff --git a/packages/charts-vue/docs/.vitepress/config/sidebar.ts b/packages/charts-vue/docs/.vitepress/config/sidebar.ts new file mode 100644 index 0000000000000000000000000000000000000000..eb383d201e629f1119dd48ee4ea9b2bd870bdd2d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/config/sidebar.ts @@ -0,0 +1,24 @@ +const sidebar = [ + { + text: '介绍', + items: [{ text: '快速开始', link: '/guide/quick-start/' }] + }, + { + text: '布局', + items: [ + { text: 'GridLayout 布局', link: '/components/grid-layout/' } + ] + }, + { + text: '图表', + items: [ + { text: 'Line 折线图', link: '/components/charts-line/' }, + { text: 'Combined 组合图', link: '/components/charts-combined/' }, + { text: 'Pie 饼状图', link: '/components/charts-pie/' }, + { text: 'Scatter 散点图', link: '/components/charts-scatter/' }, + { text: 'Gauge 进度仪表盘', link: '/components/charts-process-gauge/' }, + ] + } +]; + +export default sidebar; diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/Layout.vue b/packages/charts-vue/docs/.vitepress/farris-theme/Layout.vue new file mode 100644 index 0000000000000000000000000000000000000000..5ce25db0567a83d8b3f0357dca1913679fd6a9ea --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/Layout.vue @@ -0,0 +1,138 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/NotFound.vue b/packages/charts-vue/docs/.vitepress/farris-theme/NotFound.vue new file mode 100644 index 0000000000000000000000000000000000000000..9c902a9ea659145013c61ee0907244cfbf58b442 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/NotFound.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/FarrisFeatures.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/FarrisFeatures.vue new file mode 100644 index 0000000000000000000000000000000000000000..417459b7ffc02129727b7d8a56477805de6510e7 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/FarrisFeatures.vue @@ -0,0 +1,399 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPAlgoliaSearchBox.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPAlgoliaSearchBox.vue new file mode 100644 index 0000000000000000000000000000000000000000..dce2916aee2e569b71e8cf751e574ea9edc9a7bf --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPAlgoliaSearchBox.vue @@ -0,0 +1,93 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPBackdrop.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPBackdrop.vue new file mode 100644 index 0000000000000000000000000000000000000000..892e38aba84486f25bb1f1d0c0f2380915d6bc42 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPBackdrop.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPButton.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPButton.vue new file mode 100644 index 0000000000000000000000000000000000000000..0ad796e3975f53189d5da69f0bb43a363bf8f72b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPButton.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPCarbonAds.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPCarbonAds.vue new file mode 100644 index 0000000000000000000000000000000000000000..d1f669f18fd2206c746f5d88eb0bde28ad64420c --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPCarbonAds.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPContent.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPContent.vue new file mode 100644 index 0000000000000000000000000000000000000000..37328ebf5a4a903b9e085f0c7478ec96e1b5a046 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPContent.vue @@ -0,0 +1,276 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDemo.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDemo.vue new file mode 100644 index 0000000000000000000000000000000000000000..e816e46063b0d12acadf12ffe5722e18dc6aa344 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDemo.vue @@ -0,0 +1,237 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDoc.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDoc.vue new file mode 100644 index 0000000000000000000000000000000000000000..0dcb1f5f022c155a9f04519a92ee887e7acf7a86 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDoc.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAside.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAside.vue new file mode 100644 index 0000000000000000000000000000000000000000..4232d1563e829ab1552c68dd0f476efbd8ba35d8 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAside.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideCarbonAds.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideCarbonAds.vue new file mode 100644 index 0000000000000000000000000000000000000000..061a94d8b98f9d0b829480a660233066bb540ee4 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideCarbonAds.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideOutline.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideOutline.vue new file mode 100644 index 0000000000000000000000000000000000000000..dad437816c2ac2e38fcc91ba641b48780902e5cb --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideOutline.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideSponsors.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideSponsors.vue new file mode 100644 index 0000000000000000000000000000000000000000..dc9f8d0e147e2d5da766eb4677fee9547807ca58 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocAsideSponsors.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooter.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooter.vue new file mode 100644 index 0000000000000000000000000000000000000000..31adc7842b590d956efdf9e2476c576ba838df3c --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooter.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooterLastUpdated.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooterLastUpdated.vue new file mode 100644 index 0000000000000000000000000000000000000000..6843785ca119977e70d5ac29486c410ed33b33d0 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPDocFooterLastUpdated.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeature.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeature.vue new file mode 100644 index 0000000000000000000000000000000000000000..7f24f3f351a9bc908b55e428286116be135c4939 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeature.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeatures.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeatures.vue new file mode 100644 index 0000000000000000000000000000000000000000..db49bde43cc3dd6081e3774278bc8e510bf94744 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFeatures.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFlyout.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFlyout.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf36c8f269901a58369f08d14e19a09413acf967 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFlyout.vue @@ -0,0 +1,156 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFooter.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFooter.vue new file mode 100644 index 0000000000000000000000000000000000000000..e31e47c599fee768f538aa51706971aa05a49dc4 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPFooter.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue new file mode 100644 index 0000000000000000000000000000000000000000..9db1aee6dfc0b3156498c4ae0d91ac80182eec37 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue @@ -0,0 +1,640 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHome.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHome.vue new file mode 100644 index 0000000000000000000000000000000000000000..dd39b3365b75c0f2038a891b773689d7f98e92a8 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHome.vue @@ -0,0 +1,248 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue new file mode 100644 index 0000000000000000000000000000000000000000..80a94332a3ca8290a955a8ad8231541e7b676a3d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeHero.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeHero.vue new file mode 100644 index 0000000000000000000000000000000000000000..8895cd28df66a4779ab93a2a9f398b9355c17b4b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeHero.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeSponsors.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeSponsors.vue new file mode 100644 index 0000000000000000000000000000000000000000..88249522d2837457293b0bcd94bd0853638bd7f3 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHomeSponsors.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPImage.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPImage.vue new file mode 100644 index 0000000000000000000000000000000000000000..abb9fb7b50b7a0dd5555104ba566cb9d9a70401e --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPImage.vue @@ -0,0 +1,38 @@ + + + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..1271cc350c2f9f7544c151637a6f8305bec18722 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLink.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLocalNav.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLocalNav.vue new file mode 100644 index 0000000000000000000000000000000000000000..ab23eb4354ae1f526e5a6931b61f92f8b6e3ea51 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPLocalNav.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenu.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..15249aca44f6ad4d49e01a7287edaacc33ab6806 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenu.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuGroup.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..167874bec0376b8b27fce92965e8fc87d1816cbc --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuGroup.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..a739096c4f7931ae60a47a17610a45680f7e4f34 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPMenuLink.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNav.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNav.vue new file mode 100644 index 0000000000000000000000000000000000000000..f7a890366bb61818043fb34079ae329f3299256c --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNav.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBar.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBar.vue new file mode 100644 index 0000000000000000000000000000000000000000..96a937cf8f7e58e73f95160bb711f9877c70d41a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBar.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarAppearance.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarAppearance.vue new file mode 100644 index 0000000000000000000000000000000000000000..75121e1cdddff6b2497a4d1a55eebd668bf6589b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarAppearance.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarExtra.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarExtra.vue new file mode 100644 index 0000000000000000000000000000000000000000..972baba3407602f0a78066d1ef1f2edcff932aa2 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarExtra.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarHamburger.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarHamburger.vue new file mode 100644 index 0000000000000000000000000000000000000000..89a272472b2f8330585f4890a46da7a8053fa5eb --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarHamburger.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenu.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..c8fb6df2f44563e5676cfb02359b00058da19bce --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenu.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuGroup.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..d5b86ea62c81aefcaebbfd69fa2274398abc6658 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuGroup.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..663603ac79a92e57b3b58a8011899885d77c2e80 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarMenuLink.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSearch.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSearch.vue new file mode 100644 index 0000000000000000000000000000000000000000..e29075492b70af88959c2379ec907a2d96dd0a4a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSearch.vue @@ -0,0 +1,287 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSocialLinks.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSocialLinks.vue new file mode 100644 index 0000000000000000000000000000000000000000..e5dfd6303b526b3cff66fe97cc8439399fb37cd3 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarSocialLinks.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue new file mode 100644 index 0000000000000000000000000000000000000000..7c633d7d06e638830c181ddc1a51731de975a73f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTranslations.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTranslations.vue new file mode 100644 index 0000000000000000000000000000000000000000..fe91597b0a6e086478be6c55ed9f9098240f31b9 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavBarTranslations.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreen.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreen.vue new file mode 100644 index 0000000000000000000000000000000000000000..040030334b154013661503287413d1fece923762 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreen.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenAppearance.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenAppearance.vue new file mode 100644 index 0000000000000000000000000000000000000000..9034ac6b9574bb7bc006ec68ee369b517dbc03c9 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenAppearance.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenu.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..d75ef61da895f3460aa39bf31c652b6f38dd3e3b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenu.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroup.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..d66e02c9aca32af7210ef9b6b12a4683d00690fc --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroup.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..61f5bd8383ac2ba70a5a2088084e82ae02fa374d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupLink.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupSection.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupSection.vue new file mode 100644 index 0000000000000000000000000000000000000000..216ddcf607eecc0bf431de40186888abb4899769 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuGroupSection.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..f7ae9800b6fc67c0b044e2829b105cdec579c61e --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenMenuLink.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenSocialLinks.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenSocialLinks.vue new file mode 100644 index 0000000000000000000000000000000000000000..45f4d31845d4113fe26939cd46182edb1f928457 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenSocialLinks.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenTranslations.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenTranslations.vue new file mode 100644 index 0000000000000000000000000000000000000000..7305554ed0ce55b8cb98f22fd6ac2b137d3ca654 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPNavScreenTranslations.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPPage.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..015926b7b586a83a0bd9ddd28fb1308074706c56 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPPage.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebar.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebar.vue new file mode 100644 index 0000000000000000000000000000000000000000..8359dda5f90e5efc09792d9042d2ecc285847d53 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebar.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarGroup.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarGroup.vue new file mode 100644 index 0000000000000000000000000000000000000000..0498e320d25c08b0a22bf638293518fec704c0ae --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarGroup.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..f0a9615b7caec7fb423ab4f28752fcfddbe79ed4 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSidebarLink.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSkipLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSkipLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..492e01483b202773b3071dd339683e8e6c453687 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSkipLink.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..d8bcb725bb16584e2c4b743deaa1a811087c2815 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLink.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLinks.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLinks.vue new file mode 100644 index 0000000000000000000000000000000000000000..19790f0e25fb272008e0b50184e5ba2c36aa1a43 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSocialLinks.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsors.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsors.vue new file mode 100644 index 0000000000000000000000000000000000000000..770e44aaf7a981cf9ff31a6e7cff2174960bb9c0 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsors.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsorsGrid.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsorsGrid.vue new file mode 100644 index 0000000000000000000000000000000000000000..1ba4351847b58d9913571ff10ab22716a7526ec9 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSponsorsGrid.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitch.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitch.vue new file mode 100644 index 0000000000000000000000000000000000000000..00d8b9a35ebccbd56ce9b4ae10566f04c23af0d7 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitch.vue @@ -0,0 +1,108 @@ + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitchAppearance.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitchAppearance.vue new file mode 100644 index 0000000000000000000000000000000000000000..70462deef7d5ea4299c488bf741cd0863d9d4c68 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPSwitchAppearance.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembers.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembers.vue new file mode 100644 index 0000000000000000000000000000000000000000..0f9debdc8dd3a13165f530ad33b2b93e3e7d5cc2 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembers.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembersItem.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembersItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..6a4ba0f87058a8984b514f2fa0abf5f42a1f9c1c --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamMembersItem.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPage.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPage.vue new file mode 100644 index 0000000000000000000000000000000000000000..6af86f2e2972420c1a4b8f762203c78cfa098d6f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPage.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageSection.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageSection.vue new file mode 100644 index 0000000000000000000000000000000000000000..d31501400965e95bdd50c08ac232393897c9a40a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageSection.vue @@ -0,0 +1,77 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageTitle.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageTitle.vue new file mode 100644 index 0000000000000000000000000000000000000000..9751a1886aa572f46acb19427cd5f76deefa6ddf --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPTeamPageTitle.vue @@ -0,0 +1,63 @@ + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPExample.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPExample.vue new file mode 100644 index 0000000000000000000000000000000000000000..f7a39c42d7f22effaecc6be4a4cadea2848835a0 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPExample.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPSourceCode.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPSourceCode.vue new file mode 100644 index 0000000000000000000000000000000000000000..6adc50d05049d7919e6ffecd781d5152e7368583 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/demo/VPSourceCode.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignJustify.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignJustify.vue new file mode 100644 index 0000000000000000000000000000000000000000..653dab13e4b8dfa8cea59b5dcbd7e3af5a956713 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignJustify.vue @@ -0,0 +1,8 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignLeft.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignLeft.vue new file mode 100644 index 0000000000000000000000000000000000000000..8dc84eae4ea6d52840697e750edb0852c424da2f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignLeft.vue @@ -0,0 +1,8 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignRight.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignRight.vue new file mode 100644 index 0000000000000000000000000000000000000000..16cbb3c7d08d08b0f07d32e2daf6cb3fb30361f7 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconAlignRight.vue @@ -0,0 +1,8 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowLeft.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowLeft.vue new file mode 100644 index 0000000000000000000000000000000000000000..3f65b866a9e402815809b2f92ce3cd5c97642499 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowLeft.vue @@ -0,0 +1,7 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowRight.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowRight.vue new file mode 100644 index 0000000000000000000000000000000000000000..ed89263f76efe5edcbaad14cf28535fec2c5a32d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconArrowRight.vue @@ -0,0 +1,7 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronDown.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronDown.vue new file mode 100644 index 0000000000000000000000000000000000000000..d72f4ee832181b9ce88f5512623ba5f5f439ff4f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronDown.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronLeft.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronLeft.vue new file mode 100644 index 0000000000000000000000000000000000000000..013eb7fd9f49c07156db025c4c501cdf81b87608 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronLeft.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronRight.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronRight.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf72418fe5036063117acc825375e865a47ff216 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronRight.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronUp.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronUp.vue new file mode 100644 index 0000000000000000000000000000000000000000..0b6a873e6089f8a72611b1b8eaef8f3af439373d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconChevronUp.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconEdit.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconEdit.vue new file mode 100644 index 0000000000000000000000000000000000000000..f30a62dd3e8d06ed6942988802864902525c13d0 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconEdit.vue @@ -0,0 +1,6 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconExternalLink.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconExternalLink.vue new file mode 100644 index 0000000000000000000000000000000000000000..724599092f970ca4e7c2f43a9b83c1384bae0a5f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconExternalLink.vue @@ -0,0 +1,13 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconHeart.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconHeart.vue new file mode 100644 index 0000000000000000000000000000000000000000..d408828fec865c31c83fc51d4b10da12f4793776 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconHeart.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconLanguages.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconLanguages.vue new file mode 100644 index 0000000000000000000000000000000000000000..71a728fc04811422a4b4b8963cc0a64b27f925fa --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconLanguages.vue @@ -0,0 +1,9 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinus.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinus.vue new file mode 100644 index 0000000000000000000000000000000000000000..e0229195637204b4f537bd942f06045e17263639 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinus.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinusSquare.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinusSquare.vue new file mode 100644 index 0000000000000000000000000000000000000000..266ae3da7483974210768c562268e60a130a89c6 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMinusSquare.vue @@ -0,0 +1,6 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoon.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a9b205c61ced57673ad4b33018c319700b775656 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoon.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoreHorizontal.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoreHorizontal.vue new file mode 100644 index 0000000000000000000000000000000000000000..6fa7fca20b2ab9969b85157bb1762e916b9d0a7f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconMoreHorizontal.vue @@ -0,0 +1,7 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlus.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlus.vue new file mode 100644 index 0000000000000000000000000000000000000000..74d9f6953b2e835978713661f9b55f3fa9f2aeef --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlus.vue @@ -0,0 +1,5 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlusSquare.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlusSquare.vue new file mode 100644 index 0000000000000000000000000000000000000000..88e5b5cf42c3c91a7141cc11e8bd83e189acf0a9 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconPlusSquare.vue @@ -0,0 +1,6 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconSun.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconSun.vue new file mode 100644 index 0000000000000000000000000000000000000000..8ecb25baebcee79f878cbbafdcabba1eede86908 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/icons/VPIconSun.vue @@ -0,0 +1,13 @@ + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/aside.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/aside.ts new file mode 100644 index 0000000000000000000000000000000000000000..34b159c81bb53b8c11a424da867f4af1323ec6fb --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/aside.ts @@ -0,0 +1,21 @@ +import { computed } from 'vue' +import { useMediaQuery } from '@vueuse/core' +import { useSidebar } from './sidebar.js' + +export function useAside() { + const { hasSidebar } = useSidebar() + const is960 = useMediaQuery('(min-width: 960px)') + const is1280 = useMediaQuery('(min-width: 1280px)') + + const isAsideEnabled = computed(() => { + if (!is1280.value && !is960.value) { + return false + } + + return hasSidebar.value ? is1280.value : is960.value + }) + + return { + isAsideEnabled + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/copy-code.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/copy-code.ts new file mode 100644 index 0000000000000000000000000000000000000000..a705433331fad31e77c9e5857f7eeddc068705c5 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/copy-code.ts @@ -0,0 +1,94 @@ +import { nextTick, watch } from 'vue' +import { inBrowser, useData } from 'vitepress' + +export function useCopyCode() { + const { page } = useData() + + if (inBrowser) + watch( + () => page.value.relativePath, + () => { + nextTick(() => { + document + .querySelectorAll( + '.vp-doc div[class*="language-"] > button.copy' + ) + .forEach(handleElement) + }) + }, + { immediate: true, flush: 'post' } + ) +} + +async function copyToClipboard(text: string) { + try { + return navigator.clipboard.writeText(text) + } catch { + const element = document.createElement('textarea') + const previouslyFocusedElement = document.activeElement + + element.value = text + + // Prevent keyboard from showing on mobile + element.setAttribute('readonly', '') + + element.style.contain = 'strict' + element.style.position = 'absolute' + element.style.left = '-9999px' + element.style.fontSize = '12pt' // Prevent zooming on iOS + + const selection = document.getSelection() + const originalRange = selection + ? selection.rangeCount > 0 && selection.getRangeAt(0) + : null + + document.body.appendChild(element) + element.select() + + // Explicit selection workaround for iOS + element.selectionStart = 0 + element.selectionEnd = text.length + + document.execCommand('copy') + document.body.removeChild(element) + + if (originalRange) { + selection!.removeAllRanges() // originalRange can't be truthy when selection is falsy + selection!.addRange(originalRange) + } + + // Get the focus back on the previously focused element, if any + if (previouslyFocusedElement) { + ;(previouslyFocusedElement as HTMLElement).focus() + } + } +} + +function handleElement(el: HTMLElement) { + el.onclick = () => { + const parent = el.parentElement + const sibling = el.nextElementSibling + ?.nextElementSibling as HTMLPreElement | null + if (!parent || !sibling) { + return + } + + const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test( + parent.classList.toString() + ) + + let { innerText: text = '' } = sibling + + if (isShell) { + text = text.replace(/^ *(\$|>) /gm, '') + } + + copyToClipboard(text).then(() => { + el.classList.add('copied') + setTimeout(() => { + el.classList.remove('copied') + el.blur() + }, 2000) + }) + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/edit-link.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/edit-link.ts new file mode 100644 index 0000000000000000000000000000000000000000..e8a6a156e25296e99e94674624c9fa230327d777 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/edit-link.ts @@ -0,0 +1,14 @@ +import { computed } from 'vue' +import { useData } from 'vitepress' + +export function useEditLink() { + const { theme, page } = useData() + + return computed(() => { + const { text = 'Edit this page', pattern } = theme.value.editLink || {} + const { relativePath } = page.value + const url = pattern.replace(/:path/g, relativePath) + + return { url, text } + }) +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/flyout.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/flyout.ts new file mode 100644 index 0000000000000000000000000000000000000000..691c595823532f33443d8ab25389ca110421754a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/flyout.ts @@ -0,0 +1,58 @@ +import { Ref, ref, watch, readonly, onUnmounted } from 'vue' + +interface UseFlyoutOptions { + el: Ref + onFocus?(): void + onBlur?(): void +} + +export const focusedElement = ref() + +let active = false +let listeners = 0 + +export function useFlyout(options: UseFlyoutOptions) { + const focus = ref(false) + + if (typeof window !== 'undefined') { + !active && activateFocusTracking() + + listeners++ + + const unwatch = watch(focusedElement, (el) => { + if (el === options.el.value || options.el.value?.contains(el!)) { + focus.value = true + options.onFocus?.() + } else { + focus.value = false + options.onBlur?.() + } + }) + + onUnmounted(() => { + unwatch() + + listeners-- + + if (!listeners) { + deactivateFocusTracking() + } + }) + } + + return readonly(focus) +} + +function activateFocusTracking() { + document.addEventListener('focusin', handleFocusIn) + active = true + focusedElement.value = document.activeElement as HTMLElement +} + +function deactivateFocusTracking() { + document.removeEventListener('focusin', handleFocusIn) +} + +function handleFocusIn() { + focusedElement.value = document.activeElement as HTMLElement +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/nav.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/nav.ts new file mode 100644 index 0000000000000000000000000000000000000000..e3cf686b45522b37e79b012516277bf43150818e --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/nav.ts @@ -0,0 +1,69 @@ +import type { DefaultTheme } from 'vitepress/theme' +import { ref, computed, watch } from 'vue' +import { useData, useRoute } from 'vitepress' + +export function useNav() { + const isScreenOpen = ref(false) + + function openScreen() { + isScreenOpen.value = true + window.addEventListener('resize', closeScreenOnTabletWindow) + } + + function closeScreen() { + isScreenOpen.value = false + window.removeEventListener('resize', closeScreenOnTabletWindow) + } + + function toggleScreen() { + isScreenOpen.value ? closeScreen() : openScreen() + } + + /** + * Close screen when the user resizes the window wider than tablet size. + */ + function closeScreenOnTabletWindow() { + window.outerWidth >= 768 && closeScreen() + } + + const route = useRoute() + watch(() => route.path, closeScreen) + + return { + isScreenOpen, + openScreen, + closeScreen, + toggleScreen + } +} + +export function useLanguageLinks() { + const { site, localePath, theme } = useData() + + return computed(() => { + const langs = site.value.langs + const localePaths = Object.keys(langs) + + // one language + if (localePaths.length < 2) { + return null + } + + const route = useRoute() + + // intentionally remove the leading slash because each locale has one + const currentPath = route.path.replace(localePath.value, '') + + const candidates = localePaths.map((localePath) => ({ + text: langs[localePath].label, + link: `${localePath}${currentPath}` + })) + + const selectText = theme.value.selectText || 'Languages' + + return { + text: selectText, + items: candidates + } as DefaultTheme.NavItemWithChildren + }) +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/outline.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/outline.ts new file mode 100644 index 0000000000000000000000000000000000000000..fc308abdab5d4728ff54aaaf918ad1d9c0b5fb16 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/outline.ts @@ -0,0 +1,177 @@ +import { Ref, computed, onMounted, onUpdated, onUnmounted } from 'vue' +import { Header, useData } from 'vitepress' +import { useAside } from '../composables/aside.js' +import { throttleAndDebounce } from '../support/utils.js' + +interface HeaderWithChildren extends Header { + children?: Header[] + hidden?: boolean +} + +interface MenuItemWithLinkAndChildren { + text: string + link: string + children?: MenuItemWithLinkAndChildren[] + hidden?: boolean +} + +// magic number to avoid repeated retrieval +const PAGE_OFFSET = 56 + +export function useOutline() { + const { page } = useData() + + const hasOutline = computed(() => { + return page.value.headers.length > 0 + }) + + return { + hasOutline + } +} + +export function resolveHeaders(headers: Header[]) { + return mapHeaders(groupHeaders(headers)) +} + +function groupHeaders(headers: Header[]): HeaderWithChildren[] { + headers = headers.map((h) => Object.assign({}, h)) + + let lastH2: HeaderWithChildren | undefined + + for (const h of headers) { + if (h.level === 2) { + lastH2 = h + } else if (lastH2 && h.level <= 3) { + ;(lastH2.children || (lastH2.children = [])).push(h) + } + } + + return headers.filter((h) => h.level === 2) +} + +function mapHeaders( + headers: HeaderWithChildren[] +): MenuItemWithLinkAndChildren[] { + return headers.map((header) => ({ + text: header.title, + link: `#${header.slug}`, + children: header.children ? mapHeaders(header.children) : undefined, + hidden: header.hidden + })) +} + +export function useActiveAnchor( + container: Ref, + marker: Ref +) { + const { isAsideEnabled } = useAside() + + const onScroll = throttleAndDebounce(setActiveLink, 100) + + let prevActiveLink: HTMLAnchorElement | null = null + + onMounted(() => { + requestAnimationFrame(setActiveLink) + window.addEventListener('scroll', onScroll) + }) + + onUpdated(() => { + // sidebar update means a route change + activateLink(location.hash) + }) + + onUnmounted(() => { + window.removeEventListener('scroll', onScroll) + }) + + function setActiveLink() { + if (!isAsideEnabled.value) { + return + } + + const links = [].slice.call( + container.value.querySelectorAll('.outline-link') + ) as HTMLAnchorElement[] + + const anchors = [].slice + .call(document.querySelectorAll('.content .header-anchor')) + .filter((anchor: HTMLAnchorElement) => { + return links.some((link) => { + return link.hash === anchor.hash && anchor.offsetParent !== null + }) + }) as HTMLAnchorElement[] + + const scrollY = window.scrollY + const innerHeight = window.innerHeight + const offsetHeight = document.body.offsetHeight + const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1 + + // page bottom - highlight last one + if (anchors.length && isBottom) { + activateLink(anchors[anchors.length - 1].hash) + return + } + + for (let i = 0; i < anchors.length; i++) { + const anchor = anchors[i] + const nextAnchor = anchors[i + 1] + + const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor) + + if (isActive) { + activateLink(hash) + return + } + } + } + + function activateLink(hash: string | null) { + if (prevActiveLink) { + prevActiveLink.classList.remove('active') + } + + if (hash !== null) { + prevActiveLink = container.value.querySelector( + `a[href="${decodeURIComponent(hash)}"]` + ) + } + + const activeLink = prevActiveLink + + if (activeLink) { + activeLink.classList.add('active') + marker.value.style.top = activeLink.offsetTop + 33 + 'px' + marker.value.style.opacity = '1' + } else { + marker.value.style.top = '33px' + marker.value.style.opacity = '0' + } + } +} + +function getAnchorTop(anchor: HTMLAnchorElement): number { + return anchor.parentElement!.offsetTop - PAGE_OFFSET - 15 +} + +function isAnchorActive( + index: number, + anchor: HTMLAnchorElement, + nextAnchor: HTMLAnchorElement | undefined +): [boolean, string | null] { + const scrollTop = window.scrollY + + if (index === 0 && scrollTop === 0) { + return [true, null] + } + + if (scrollTop < getAnchorTop(anchor)) { + return [false, null] + } + + if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor)) { + return [true, anchor.hash] + } + + return [false, null] +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/prev-next.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/prev-next.ts new file mode 100644 index 0000000000000000000000000000000000000000..2633a617eecfca1b2877713e9247b75b88d150f6 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/prev-next.ts @@ -0,0 +1,26 @@ +import { computed } from 'vue' +import { useData } from 'vitepress' +import { isActive } from '../support/utils.js' +import { getSidebar, getFlatSideBarLinks } from '../support/sidebar.js' + +export function usePrevNext() { + const { page, theme, frontmatter } = useData() + + return computed(() => { + const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath) + const candidates = getFlatSideBarLinks(sidebar) + + const index = candidates.findIndex((link) => { + return isActive(page.value.relativePath, link.link) + }) + + return { + prev: frontmatter.value.prev + ? { ...candidates[index - 1], text: frontmatter.value.prev } + : candidates[index - 1], + next: frontmatter.value.next + ? { ...candidates[index + 1], text: frontmatter.value.next } + : candidates[index + 1] + } + }) +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/scrollIFunc.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/scrollIFunc.ts new file mode 100644 index 0000000000000000000000000000000000000000..0be95f5a49c971e3854a0e829db99e87179de1c5 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/scrollIFunc.ts @@ -0,0 +1,133 @@ +const animateCls = 'inb-animate-slideInUp'; +const topDistance = 120; +/** + * 处理动画 + * @param elements + * @param extendfunc + */ +export function animateFunc(elements, extendfunc,isLargeSize=true) { + var viewHeight = window.innerHeight, + viewTop = document.documentElement.scrollTop, + viewBottom = viewTop + viewHeight; + let wrapper=document.querySelector('.farris-doc-feature-wrapper'); + if(!wrapper) return; + for (var k = 0; k < elements.length; k++) { + let ele = elements[k]; + var elementAnimation = ele.getAttribute('animate') ? ele.getAttribute('animate') : animateCls, + elementHeight = ele.clientHeight, + elementTop = ele.offsetTop+wrapper['offsetTop'], + elementBottom = elementTop + elementHeight; + if (elementBottom >= viewTop && elementTop <= viewBottom) { + ele.style.visibility = 'visible'; + if (!ele.classList.contains(elementAnimation)) { + ele.className = ele.className + ' ' + elementAnimation; + ele.className = ele.className + ' ' + 'inb-animated'; + setTimeout(()=>{ + ele.className = ele.className + ' ' + 'animate-img'; + },300); + } + } else { + ele.style.visibility = 'hidden'; + ele.className = ele.className.replace(elementAnimation, ''); + ele.className = ele.className.replace('inb-animated', ''); + ele.className = ele.className.replace('animate-img', ''); + } + + if (elementTop + 30 < viewHeight * 0.5 + viewTop && elementBottom - 30 > viewHeight * 0.5 + viewTop) { + extendfunc && extendfunc(k,isLargeSize); + } + + // if(elementBottom) + } +} +/** + * 改变标题 + * @param cur + */ +export function changeHeader(cur,sLargeSize=true) { + let headerContainer = document.querySelectorAll('.feature-header'); + if (headerContainer) { + for (let k = 0; k < headerContainer.length; k++) { + let ele = headerContainer[k]; + if (k == cur) { + if (!ele.classList.contains(animateCls)) { + ele.className = ele.className + ' ' + animateCls; + } + } else { + ele.className = ele.className.replace(animateCls, ''); + } + } + } +} +/** + * 中间区域左侧的标题导航 + * @returns + */ +export function changeFeatureCls(isLargeSize=true) { + let featureEL=document.querySelector('.farris-doc-feature'); + let wrapper=document.querySelector('.farris-doc-feature-wrapper'); + if(!featureEL||!wrapper) return; + if(!isLargeSize){ + featureEL.className=featureEL.className.replace('fixed',''); + return; + } + let viewHeight = window.innerHeight; + let viewTop = document.documentElement.scrollTop; + + if (viewTop + topDistance > wrapper['offsetTop'] && wrapper['offsetTop'] + wrapper['clientHeight'] > viewTop + topDistance + viewHeight) { + if(!featureEL.classList.contains('fixed')){ + featureEL.className=featureEL.className+' fixed'; + } + } else { + if(featureEL.classList.contains('fixed')){ + featureEL.className=featureEL.className.replace('fixed',''); + } + } + +} +/** + * 顶部导航 + * @returns + */ +export function changePageHeaderFixedState(){ + let viewTop = document.documentElement.scrollTop; + let navEl=document.querySelector('.VPNav'); + if(!navEl) return; + if(viewTop> navEl['clientHeight']){ + if(!navEl.classList.contains('fixed')){ + navEl.className=navEl.className+' fixed'; + } + }else{ + if(navEl.classList.contains('fixed')){ + navEl.className=navEl.className.replace('fixed',''); + } + + } + +} +/** + * 改变窗口大小 + * @returns + */ +export function resizeWindow() { + var viewSize = { "el": 1600, "xl": 1240, "lg": 1000, "md": 830, "sm": 730,"min":639 }; + var windowWidth = parseInt(document.documentElement.clientWidth+'', 10); + var matchSize = ""; + // 暂时没有其他用处 + if (windowWidth > viewSize['el']) { + matchSize = "ex"; + } else if (windowWidth > viewSize['xl']) { + matchSize = "el"; + } else if (windowWidth > viewSize['lg']) { + matchSize = "xl"; + } else if (windowWidth > viewSize['md']) { + matchSize = "lg"; + } else if (windowWidth > viewSize['sm']) { + matchSize = "md"; + } else if (windowWidth > viewSize['min']) { + matchSize = "sm"; + }else{ + matchSize = "min"; + } + return matchSize; +} \ No newline at end of file diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/sidebar.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/sidebar.ts new file mode 100644 index 0000000000000000000000000000000000000000..414c5558f3b126ded6706232488596f898c5928a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/sidebar.ts @@ -0,0 +1,88 @@ +import { computed, onMounted, onUnmounted, Ref, ref, watchEffect } from 'vue' +import { useData, useRoute } from 'vitepress' +import { getSidebar } from '../support/sidebar.js' + +export function useSidebar() { + const route = useRoute() + const { theme, frontmatter } = useData() + + const isOpen = ref(false) + + const sidebar = computed(() => { + const sidebarConfig = theme.value.sidebar + const relativePath = route.data.relativePath + return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [] + }) + + const hasSidebar = computed(() => { + return ( + frontmatter.value.sidebar !== false && + sidebar.value.length > 0 && + frontmatter.value.layout !== 'home' + ) + }) + + const hasAside = computed(() => { + if ( + frontmatter.value.layout !== 'home' && + frontmatter.value.aside === false + ) + return false + + return hasSidebar.value + }) + + function open() { + isOpen.value = true + } + + function close() { + isOpen.value = false + } + + function toggle() { + isOpen.value ? close() : open() + } + + return { + isOpen, + sidebar, + hasSidebar, + hasAside, + open, + close, + toggle + } +} + +/** + * a11y: cache the element that opened the Sidebar (the menu button) then + * focus that button again when Menu is closed with Escape key. + */ +export function useCloseSidebarOnEscape( + isOpen: Ref, + close: () => void +) { + let triggerElement: HTMLButtonElement | undefined + + watchEffect(() => { + triggerElement = isOpen.value + ? (document.activeElement as HTMLButtonElement) + : undefined + }) + + onMounted(() => { + window.addEventListener('keyup', onEscape) + }) + + onUnmounted(() => { + window.removeEventListener('keyup', onEscape) + }) + + function onEscape(e: KeyboardEvent) { + if (e.key === 'Escape' && isOpen.value) { + close() + triggerElement?.focus() + } + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/composables/sponsor-grid.ts b/packages/charts-vue/docs/.vitepress/farris-theme/composables/sponsor-grid.ts new file mode 100644 index 0000000000000000000000000000000000000000..e4dc05c82398455ec380bb5430b20b60354a8e9a --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/composables/sponsor-grid.ts @@ -0,0 +1,135 @@ +import { Ref, onMounted, onUnmounted } from 'vue' +import { throttleAndDebounce } from '../support/utils.js' + +export interface GridSetting { + [size: string]: [number, number][] +} + +export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big' + +export interface UseSponsorsGridOprions { + el: Ref + size?: GridSize +} + +/** + * Defines grid configuration for each sponsor size in touple. + * + * [Screen widh, Column size] + * + * It sets grid size on matching screen size. For example, `[768, 5]` will + * set 5 columns when screen size is bigger or equal to 768px. + * + * Column will set only when item size is bigger than the column size. For + * example, even we define 5 columns, if we only have 1 sponsor yet, we would + * like to show it in 1 column to make it stand out. + */ +const GridSettings: GridSetting = { + xmini: [[0, 2]], + mini: [], + small: [ + [920, 6], + [768, 5], + [640, 4], + [480, 3], + [0, 2] + ], + medium: [ + [960, 5], + [832, 4], + [640, 3], + [480, 2] + ], + big: [ + [832, 3], + [640, 2] + ] +} + +export function useSponsorsGrid({ + el, + size = 'medium' +}: UseSponsorsGridOprions) { + const onResize = throttleAndDebounce(manage, 100) + + onMounted(() => { + manage() + window.addEventListener('resize', onResize) + }) + + onUnmounted(() => { + window.removeEventListener('resize', onResize) + }) + + function manage() { + adjustSlots(el.value!, size) + } +} + +function adjustSlots(el: HTMLElement, size: GridSize) { + const tsize = el.children.length + const asize = el.querySelectorAll('.vp-sponsor-grid-item:not(.empty)').length + + const grid = setGrid(el, size, asize) + + manageSlots(el, grid, tsize, asize) +} + +function setGrid(el: HTMLElement, size: GridSize, items: number) { + const settings = GridSettings[size] + const screen = window.innerWidth + + let grid = 1 + + settings.some(([breakpoint, value]) => { + if (screen >= breakpoint) { + grid = items < value ? items : value + return true + } + }) + + setGridData(el, grid) + + return grid +} + +function setGridData(el: HTMLElement, value: number) { + el.dataset.vpGrid = String(value) +} + +function manageSlots( + el: HTMLElement, + grid: number, + tsize: number, + asize: number +) { + const diff = tsize - asize + const rem = asize % grid + const drem = rem === 0 ? rem : grid - rem + + neutralizeSlots(el, drem - diff) +} + +function neutralizeSlots(el: HTMLElement, count: number) { + if (count === 0) { + return + } + + count > 0 ? addSlots(el, count) : removeSlots(el, count * -1) +} + +function addSlots(el: HTMLElement, count: number) { + for (let i = 0; i < count; i++) { + const slot = document.createElement('div') + + slot.classList.add('vp-sponsor-grid-item', 'empty') + + el.append(slot) + } +} + +function removeSlots(el: HTMLElement, count: number) { + for (let i = 0; i < count; i++) { + el.removeChild(el.lastElementChild!) + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/FExample.vue b/packages/charts-vue/docs/.vitepress/farris-theme/example/FExample.vue new file mode 100644 index 0000000000000000000000000000000000000000..93f073984d37024017cf3d99135b0c7b1e6e2aea --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/FExample.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/type.ts b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/type.ts new file mode 100644 index 0000000000000000000000000000000000000000..4cba9163ed2495534372fbc1572bafcbd3bb879f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/type.ts @@ -0,0 +1,12 @@ +import { ComputedRef, Ref } from "vue"; + +export interface UseCopy { + copyText: ComputedRef; + onCopy: () => Promise; +} + +export interface UseCollapse { + controlText: ComputedRef; + isExpanded: Ref; + onClickControl: () => void; +} \ No newline at end of file diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-collapse.ts b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-collapse.ts new file mode 100644 index 0000000000000000000000000000000000000000..445cd6aa6db6ad1941d642960e65f4b028d06263 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-collapse.ts @@ -0,0 +1,25 @@ +import { computed, ComputedRef, ref, SetupContext } from 'vue'; +import { UseCollapse } from './type'; + + +export function useCollapse(props: any, setupContext: SetupContext, locale: ComputedRef): UseCollapse { + + const isExpanded = ref(false); + + + + const controlText = computed(() => { + return isExpanded.value ? locale.value['hide-text'] : locale.value['show-text']; + }); + + function onClickControl() { + isExpanded.value = !isExpanded.value; + + }; + + return { controlText, isExpanded, onClickControl }; + +} + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-copy.ts b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-copy.ts new file mode 100644 index 0000000000000000000000000000000000000000..d1004f13b2c70c27b626650a99d8e7e5b9434cef --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/composition/use-copy.ts @@ -0,0 +1,24 @@ +import { computed, ComputedRef, ref, Ref, SetupContext } from "vue"; +import { UseCopy } from "./type"; +import message from '../messages/message'; +import clipboardCopy from "../utils/clipboard-copy"; + +export function useCopy(props: any, context: SetupContext, locale: ComputedRef): UseCopy { + + const isShowTip = ref(false); + + const copyText = computed(() => { + return isShowTip.value ? locale.value['copy-success-text'] : locale.value['copy-button-text']; + }); + + async function onCopy() { + try { + await clipboardCopy(decodeURIComponent(props.sourceCode)); + message.info(locale.value['copy-success-text']); + } catch (err) { + message.error(locale.value['copy-success-text']); + } + } + + return { copyText, onCopy }; +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/FMessage.vue b/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/FMessage.vue new file mode 100644 index 0000000000000000000000000000000000000000..275b1218c5a411c09270cb76bf594395df17df55 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/FMessage.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/message.js b/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/message.js new file mode 100644 index 0000000000000000000000000000000000000000..c71688e20769c37587f352031d650e5e8c9e1787 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/messages/message.js @@ -0,0 +1,52 @@ +import { createApp, h } from 'vue' +import Message from './FMessage.vue' + +// newInstance +Message.newInstance = (props = {}) => { + const container = document.createElement('div') + + const app = createApp({ + render() { + return h(Message, { + ...props, + ref: 'messageRef' + }) + } + }) + + const instance = app.mount(container) + const messageRef = instance.$refs.messageRef + document.body.appendChild(container.firstElementChild) + + return { + add(messageProps) { + messageRef.add(messageProps) + }, + remove(name) { + messageRef.remove(name) + } + } +} + +// message +let messageInstance + +function getMessageInstance() { + messageInstance = messageInstance || Message.newInstance() + return messageInstance +} + +function message(content, { duration = 3, type = '' }) { + const instance = getMessageInstance() + + instance.add({ content, duration, type }) +} + +export default { + info(content, options) { + return message(content, { ...options }) + }, + error(content, options) { + return message(content, { ...options, type: 'error' }) + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/clipboard-copy.js b/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/clipboard-copy.js new file mode 100644 index 0000000000000000000000000000000000000000..f3672b1ff0f63d526a1c1d9f4f51367e48471f48 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/clipboard-copy.js @@ -0,0 +1,61 @@ +// https://github.com/feross/clipboard-copy +function makeError() { + return new DOMException('The request is not allowed', 'NotAllowedError') +} + +async function copyClipboardApi(text) { + // Use the Async Clipboard API when available. Requires a secure browsing + // context (i.e. HTTPS) + if (!navigator.clipboard) { + throw makeError() + } + return navigator.clipboard.writeText(text) +} + +async function copyExecCommand(text) { + // Put the text to copy into a + const span = document.createElement('span') + span.textContent = text + + // Preserve consecutive spaces and newlines + span.style.whiteSpace = 'pre' + span.style.webkitUserSelect = 'auto' + span.style.userSelect = 'all' + + // Add the to the page + document.body.appendChild(span) + + // Make a selection object representing the range of text selected by the user + const selection = window.getSelection() + const range = window.document.createRange() + selection.removeAllRanges() + range.selectNode(span) + selection.addRange(range) + + // Copy text to the clipboard + let success = false + try { + success = window.document.execCommand('copy') + } finally { + // Cleanup + selection.removeAllRanges() + window.document.body.removeChild(span) + } + + if (!success) throw makeError() +} + +async function clipboardCopy(text) { + try { + await copyClipboardApi(text) + } catch (err) { + // ...Otherwise, use document.execCommand() fallback + try { + await copyExecCommand(text) + } catch (err2) { + throw err2 || err || makeError() + } + } +} + +export default clipboardCopy diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/throttle.js b/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/throttle.js new file mode 100644 index 0000000000000000000000000000000000000000..b34989404b8d459a3b4a5c23ec64ef5d07ade9a1 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/example/utils/throttle.js @@ -0,0 +1,45 @@ +/** + * js节流 + * @param method + * @param delay + * @return {Function} + */ +export function throttle(method, delay) { + let timer = null + let begin = new Date() + return function () { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const context = this, + args = arguments + const current = new Date() + const remaining = delay - (current - begin) + clearTimeout(timer) + if (remaining <= 0) { + method.apply(context, args) + begin = new Date() + } else { + timer = setTimeout(function () { + method.apply(context, args) + }, remaining) + } + } +} + +/** + * 函数防抖 + * @param method + * @param delay + * @return {Function} + */ +export function debounce(method, delay) { + let timer = null + return function () { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const context = this, + args = arguments + clearTimeout(timer) + timer = setTimeout(function () { + method.call(context, args) + }, delay) + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f2728758683cd7264fa26d1acb93075505eeeb6a Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..de6a128bc11ed2dbc4976e69de1ddb4b240ca6d7 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-cyrillic.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..701afd3cb0c9d9febc3447de874cb3b432f903bd Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..74125bbc86cd16d42ddc9da4c6d7f1ec0cbf5769 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-greek.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..2a687296748f6b8bc8076cd11bde49cd27e4442b Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f64035158d7e4c01654e3f23dcd6e8299928a28c Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-cyrillic.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..00218960325a4636092b66a46e701c2bf4bb0466 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..71c265f85c9b45b6a3f2df9a0c6aa39547501b98 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-greek.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..9c1b9440ed419d4a71ba46b0db3951164f9e10df Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..01fcf20724f915f68a974ef2fb85f86f3039b1d8 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-latin.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-vietnamese.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-vietnamese.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..e4f788ee02bb687bc1d5045483ff0d381e7654e0 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-italic-vietnamese.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..2fa148c30c8d34aaca4ad1bd18a853d17fc7f594 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..1a4cd429ecffcaf89a687488e7d06fd41617160d Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-latin.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..28593ccb8a4d849a746f2b970678fe426cb136e8 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..a20adc161f433a7c4e3d92306301b9228bcf9fb4 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-cyrillic.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..e3b0be76db2641253744aa613469eedb118667da Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f790e047daa346583880da2be470431e35aa6054 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-greek.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin-ext.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..715bd903b9b14d22a056f10e6d13b8d7e0acce57 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin-ext.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..a540b7afe7a46b9ff1412f433cd5180a9a9ab77d Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-latin.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-vietnamese.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-vietnamese.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..5a9f9cb9ca0cd78b6ea2f3e5c9d2838dc8895598 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-roman-vietnamese.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-vietnamese.woff2 b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-vietnamese.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..c2ffbb0913efa81e8bae6d78a803c286fcdeead7 Binary files /dev/null and b/packages/charts-vue/docs/.vitepress/farris-theme/fonts/inter-vietnamese.woff2 differ diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/index.ts b/packages/charts-vue/docs/.vitepress/farris-theme/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..133152d1e2360b84f7e693cafb15c4c24a6a2cdb --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/index.ts @@ -0,0 +1,29 @@ +import './styles/fonts.css'; +import './styles/vars.css'; +import './styles/base.css'; +import './styles/utils.css'; +import './styles/components/custom-block.css'; +import './styles/components/vp-code.css'; +import './styles/components/vp-doc.css'; +import './styles/components/vp-sponsor.css'; +import './styles/lib-override/example-block.css'; + +import { Theme } from 'vitepress'; +import Layout from './Layout.vue'; +import NotFound from './NotFound.vue'; + +export { default as VPHomeHero } from './components/VPHomeHero.vue'; +export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'; +export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'; +export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'; +export { default as VPTeamPage } from './components/VPTeamPage.vue'; +export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'; +export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'; +export { default as VPTeamMembers } from './components/VPTeamMembers.vue'; + +const theme: Theme = { + Layout, + NotFound +}; + +export default theme; diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/shared/shared.ts b/packages/charts-vue/docs/.vitepress/farris-theme/shared/shared.ts new file mode 100644 index 0000000000000000000000000000000000000000..580ce1c60926a89d2b5947c8109217ca8a4fe09d --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/shared/shared.ts @@ -0,0 +1,163 @@ +import { + SiteData, + PageData, + LocaleConfig, + HeadConfig +} from '../types/shared' + +export type { + SiteData, + PageData, + HeadConfig, + LocaleConfig, + Header, + DefaultTheme, + PageDataPayload, + CleanUrlsMode, + Awaitable +} from '../types/shared' + +export const EXTERNAL_URL_RE = /^[a-z]+:/i +export const APPEARANCE_KEY = 'vitepress-theme-appearance' + +export const inBrowser = typeof window !== 'undefined' + +export const notFoundPageData: PageData = { + relativePath: '', + title: '404', + description: 'Not Found', + headers: [], + frontmatter: { sidebar: false, layout: 'page' }, + lastUpdated: 0 +} + +function findMatchRoot(route: string, roots: string[]): string | undefined { + // first match to the routes with the most deep level. + roots.sort((a, b) => { + const levelDelta = b.split('/').length - a.split('/').length + if (levelDelta !== 0) { + return levelDelta + } else { + return b.length - a.length + } + }) + + for (const r of roots) { + if (route.startsWith(r)) return r + } +} + +function resolveLocales( + locales: Record, + route: string +): T | undefined { + const localeRoot = findMatchRoot(route, Object.keys(locales)) + return localeRoot ? locales[localeRoot] : undefined +} + +export function createLangDictionary(siteData: { + themeConfig?: Record + locales?: Record +}) { + const { locales } = siteData.themeConfig || {} + const siteLocales = siteData.locales + return locales && siteLocales + ? Object.keys(locales).reduce((langs, path) => { + langs[path] = { + label: locales![path].label, + lang: siteLocales[path].lang + } + return langs + }, {} as Record) + : {} +} + +// this merges the locales data to the main data by the route +export function resolveSiteDataByRoute( + siteData: SiteData, + route: string +): SiteData { + route = cleanRoute(siteData, route) + + const localeData = resolveLocales(siteData.locales || {}, route) + const localeThemeConfig = resolveLocales( + siteData.themeConfig.locales || {}, + route + ) + + // avoid object rest spread since this is going to run in the browser + // and spread is going to result in polyfill code + return Object.assign({}, siteData, localeData, { + themeConfig: Object.assign({}, siteData.themeConfig, localeThemeConfig, { + // clean the locales to reduce the bundle size + locales: {} + }), + lang: (localeData || siteData).lang, + // clean the locales to reduce the bundle size + locales: {}, + langs: createLangDictionary(siteData) + }) +} + +/** + * Create the page title string based on configs. + */ +export function createTitle(siteData: SiteData, pageData: PageData): string { + const title = pageData.title || siteData.title + const template = pageData.titleTemplate ?? siteData.titleTemplate + + if (typeof template === 'string' && template.includes(':title')) { + return template.replace(/:title/g, title) + } + + const templateString = createTitleTemplate(siteData.title, template) + + return `${title}${templateString}` +} + +function createTitleTemplate( + siteTitle: string, + template?: string | boolean +): string { + if (template === false) { + return '' + } + + if (template === true || template === undefined) { + return ` | ${siteTitle}` + } + + if (siteTitle === template) { + return '' + } + + return ` | ${template}` +} + +/** + * Clean up the route by removing the `base` path if it's set in config. + */ +function cleanRoute(siteData: SiteData, route: string): string { + if (!inBrowser) { + return route + } + + const base = siteData.base + const baseWithoutSuffix = base.endsWith('/') ? base.slice(0, -1) : base + + return route.slice(baseWithoutSuffix.length) +} + +function hasTag(head: HeadConfig[], tag: HeadConfig) { + const [tagType, tagAttrs] = tag + if (tagType !== 'meta') return false + const keyAttr = Object.entries(tagAttrs)[0] // First key + if (keyAttr == null) return false + return head.some( + ([type, attrs]) => type === tagType && attrs[keyAttr[0]] === keyAttr[1] + ) +} + +export function mergeHead(prev: HeadConfig[], curr: HeadConfig[]) { + return [...prev.filter((tagAttrs) => !hasTag(curr, tagAttrs)), ...curr] +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/base.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/base.css new file mode 100644 index 0000000000000000000000000000000000000000..7b0868b04b81c96350a763802d3f8a91377432ac --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/base.css @@ -0,0 +1,450 @@ +*, +::before, +::after { + box-sizing: border-box; +} + +html { + line-height: 1.4; + font-size: 16px; + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +html.dark { + color-scheme: dark; +} + +body { + position:relative; + margin: 0; + width: 100%; + min-width: 320px; + min-height: 100vh; + line-height: 24px; + font-family: var(--vp-font-family-base); + font-size: 14px; + font-weight: 400; + color: var(--vp-c-text-1) !important; + background-color: var(--vp-c-bg) !important; + direction: ltr; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +main { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + line-height: 24px; + font-size: 16px; + font-weight: 400; + font-family: var(--vp-font-family-title); +} + +p { + margin: 0; +} + +strong, +b { + font-weight: 600; +} + +/** + * Avoid 300ms click delay on touch devices that support the `touch-action` + * CSS property. + * + * In particular, unlike most other browsers, IE11+Edge on Windows 10 on + * touch devices and IE Mobile 10-11 DON'T remove the click delay when + * `` is present. + * However, they DO support removing the click delay via + * `touch-action: manipulation`. + * + * See: + * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch + * - http://caniuse.com/#feat=css-touch-action + * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay + */ +a, +area, +button, +[role='button'], +input, +label, +select, +summary, +textarea { + touch-action: manipulation; +} + +a { + color: inherit; + text-decoration: inherit; +} + +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +blockquote { + margin: 0; +} + +pre, +code, +kbd, +samp { + font-family: var(--vp-font-family-mono); +} + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} + +figure { + margin: 0; +} + +img, +video { + max-width: 100%; + height: auto; +} + +button, +input, +optgroup, +select, +textarea { + border: 0; + padding: 0; + line-height: inherit; + color: inherit; +} + +button { + padding: 0; + font-family: inherit; + background-color: transparent; + background-image: none; +} + +button, +[role='button'] { + cursor: pointer; +} + +button:focus, +button:focus-visible { + outline: 1px dotted; + outline: 4px auto -webkit-focus-ring-color; +} + +button:focus:not(:focus-visible) { + outline: none !important; +} + +input:focus, +textarea:focus, +select:focus { + outline: none; +} + +table { + border-collapse: collapse; +} + +input { + background-color: transparent; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: var(--vp-c-text-3); +} + +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { + color: var(--vp-c-text-3); +} + +input::placeholder, +textarea::placeholder { + color: var(--vp-c-text-3); +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type='number'] { + -moz-appearance: textfield; + -webkit-appearance: textfield; +} + +textarea { + resize: vertical; +} + +select { + -webkit-appearance: none; +} + +fieldset { + margin: 0; + padding: 0; +} + +.img-block { + display: block; + margin: 0; + width: 100%; +} + +/*滚动条*/ +::-webkit-scrollbar { + width: 7px; + height: 7px; + background-color: #8e8e8e; +} + +::-webkit-scrollbar-track { + border-radius: 0; + background-color: var(--webkit-scrollbar-track-bg); + border: none; + background-clip: padding-box +} + +::-webkit-scrollbar-thumb { + background-color: var(--webkit-scrollbar-thumb-bg);; + border: none; + background-clip: content-box; + opacity: .6; + border-radius: 4px +} + +::-webkit-scrollbar-thumb:hover { + background: var(--webkit-scrollbar-thumb-hover-bg); +} + + +/*默认蓝色按钮*/ +.farris-doc-btn { + position: relative; + min-width: 152px; + text-align: center; + line-height: 54px; + padding: 0 30px; + font-size: 18px; + color: #ffffff; + background-image: linear-gradient(-51deg, #328bff 0%, #2a87ff 100%); + box-shadow: 0px 4px 10px 0px rgba(69, 144, 255, 0.25); + border-radius: 8px; + display: inline-block; + transition:background-image 0.2s; +} +.farris-doc-btn:hover{ + color:#fff; + background-image: linear-gradient(135deg, #529DFF 0%, #559FFF 100%) ; +} + +.inb-animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both +} + +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 20%, 0); + transform: translate3d(0, 20%, 0); + visibility: visible + } + + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 20%, 0); + transform: translate3d(0, 20%, 0); + visibility: visible + } + + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.inb-animate-slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp +} + + +@keyframes animate-left { + 0% { + left: 50%; + top: 50%; + opacity: 0; + } + + 100% { + left: 0%; + top: 15%; + opacity: 1; + } +} + + + +@keyframes animate-top { + 0% { + left: 50%; + top: 50%; + opacity: 0; + } + + 100% { + left: 25%; + top: 0%; + opacity: 1; + } +} + +@keyframes animate-center { + 0% { + top: 50%; + left: 50%; + opacity: 0; + } + + 100% { + top: 30%; + left: 50%; + opacity: 1; + } +} + +@keyframes animate-right { + 0% { + right: 50%; + bottom: 50%; + opacity: 0; + } + + 100% { + right: 0%; + bottom: 50%; + opacity: 1; + } +} + +@keyframes animate-right-bottom { + 0% { + right: 50%; + bottom: 50%; + opacity: 0; + } + + 100% { + right: 15%; + bottom: 0%; + opacity: 1; + } +} + +@keyframes animate-left-bottom { + 0% { + left: 50%; + bottom: 50%; + opacity: 0; + } + + 100% { + left: 15%; + bottom: 0%; + opacity: 1; + } +} + +@keyframes animate-bottom { + 0% { + left: 50%; + bottom: 50%; + opacity: 0; + } + + 100% { + left: 45%; + bottom: 0%; + opacity: 1; + } +} + + +@keyframes changebg { + 0% { + opacity: 0 + } + + to { + opacity: 1 + } +} + +@keyframes bannershowicons { + 0% { + transform: scale(0); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +@keyframes bannericonfloat { + 0% { + transform: translateY(10px); + } + + 50% { + transform: translateY(0px); + } + + 100% { + transform: translateY(10px); + } + +} + diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/custom-block.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/custom-block.css new file mode 100644 index 0000000000000000000000000000000000000000..81bc71e400fd88904edfcbf193cbb121f25b9cb3 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/custom-block.css @@ -0,0 +1,90 @@ +.custom-block { + border: 1px solid transparent; + border-radius: 8px; + padding: 16px 16px 8px; + line-height: 24px; + font-size: 14px; + color: var(--vp-c-text-2); +} + +.custom-block.info { + border-color: var(--vp-custom-block-info-border); + color: var(--vp-custom-block-info-text); + background-color: var(--vp-custom-block-info-bg); +} + +.custom-block.info code { + background-color: var(--vp-custom-block-info-code-bg); +} + +.custom-block.tip { + border-color: var(--vp-custom-block-tip-border); + color: var(--vp-custom-block-tip-text); + background-color: var(--vp-custom-block-tip-bg); +} + +.custom-block.tip code { + background-color: var(--vp-custom-block-tip-code-bg); +} + +.custom-block.warning { + border-color: var(--vp-custom-block-warning-border); + color: var(--vp-custom-block-warning-text); + background-color: var(--vp-custom-block-warning-bg); +} + +.custom-block.warning code { + background-color: var(--vp-custom-block-warning-code-bg); +} + +.custom-block.danger { + border-color: var(--vp-custom-block-danger-border); + color: var(--vp-custom-block-danger-text); + background-color: var(--vp-custom-block-danger-bg); +} + +.custom-block.danger code { + background-color: var(--vp-custom-block-danger-code-bg); +} + +.custom-block.details { + border-color: var(--vp-custom-block-details-border); + color: var(--vp-custom-block-details-text); + background-color: var(--vp-custom-block-details-bg); +} + +.custom-block.details code { + background-color: var(--vp-custom-block-details-code-bg); +} + +.custom-block-title { + font-weight: 700; +} + +.custom-block p + p { + margin: 8px 0; +} + +.custom-block.details summary { + margin: 0 0 8px; + font-weight: 700; +} + +.custom-block.details summary + p { + margin: 8px 0; +} + +.custom-block a { + color: inherit; + font-weight: 600; + text-decoration: underline; + transition: opacity 0.25s; +} + +.custom-block a:hover { + opacity: 0.6; +} + +.custom-block code { + font-size: var(--vp-custom-block-code-font-size); +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-code.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-code.css new file mode 100644 index 0000000000000000000000000000000000000000..ee74e5b27d7039095aa5c7f2c9c4a012d6298f14 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-code.css @@ -0,0 +1,7 @@ +.dark .vp-code-light { + display: none; +} + +html:not(.dark) .vp-code-dark { + display: none; +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-doc.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-doc.css new file mode 100644 index 0000000000000000000000000000000000000000..acc5c0c07be2758adb368dc29453048be161f1fe --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-doc.css @@ -0,0 +1,446 @@ +/** + * Headings + * -------------------------------------------------------------------------- */ + +.vp-doc h1, +.vp-doc h2, +.vp-doc h3, +.vp-doc h4, +.vp-doc h5, +.vp-doc h6 { + position: relative; + font-weight: 600; + outline: none; +} + +.vp-doc h1 { + letter-spacing: -0.02em; + line-height: 40px; + font-size: 28px; +} + +.vp-doc h2 { + margin: 48px 0 16px; + border-top: 1px solid var(--vp-c-divider-light); + padding-top: 24px; + letter-spacing: -0.02em; + line-height: 32px; + font-size: 24px; +} + +.vp-doc h3 { + margin: 32px 0 0; + letter-spacing: -0.01em; + line-height: 28px; + font-size: 20px; +} + +.vp-doc .header-anchor { + float: left; + margin-left: -0.87em; + padding-right: 0.23em; + font-weight: 500; + opacity: 0; + transition: color 0.25s, opacity 0.25s; +} + +.vp-doc h1:hover .header-anchor, +.vp-doc h1 .header-anchor:focus, +.vp-doc h2:hover .header-anchor, +.vp-doc h2 .header-anchor:focus, +.vp-doc h3:hover .header-anchor, +.vp-doc h3 .header-anchor:focus, +.vp-doc h4:hover .header-anchor, +.vp-doc h4 .header-anchor:focus, +.vp-doc h5:hover .header-anchor, +.vp-doc h5 .header-anchor:focus, +.vp-doc h6:hover .header-anchor, +.vp-doc h6 .header-anchor:focus { + opacity: 1; +} + +@media (min-width: 768px) { + .vp-doc h1 { + letter-spacing: -0.02em; + line-height: 40px; + font-size: 32px; + } +} + +/** + * Paragraph and inline elements + * -------------------------------------------------------------------------- */ + +.vp-doc p, +.vp-doc summary { + margin: 16px 0; +} + +.vp-doc p { + line-height: 28px; +} + +.vp-doc blockquote { + margin: 16px 0; + border-left: 2px solid var(--vp-c-divider); + padding-left: 16px; + transition: border-color 0.5s; +} + +.vp-doc blockquote > p { + margin: 0; + font-size: 16px; + color: var(--vp-c-text-2); + transition: color 0.5s; +} + +.vp-doc a { + font-weight: 500; + color: var(--vp-c-brand); + text-decoration-style: dotted; + transition: color 0.25s; +} + +.vp-doc a:hover { + color: var(--vp-c-brand-dark); +} + +.vp-doc strong { + font-weight: 600; +} + +/** + * Lists + * -------------------------------------------------------------------------- */ + +/* .vp-doc ul, +.vp-doc ol { + padding-left: 1.25rem; + margin: 16px 0; +} */ + +/* .vp-doc ul { + list-style: disc; +} */ + +/* .vp-doc ol { + list-style: decimal; +} */ + +/* .vp-doc li + li { + margin-top: 8px; +} */ + +/* .vp-doc li > ol, +.vp-doc li > ul { + margin: 8px 0 0; +} */ + +/** + * Table + * -------------------------------------------------------------------------- */ + +.vp-doc table:not(.table) { + display: block; + border-collapse: collapse; + margin: 20px 0; + overflow-x: auto; +} + +.vp-doc table:not(.table) tr { + border-top: 1px solid var(--vp-c-divider); + transition: background-color 0.5s; +} + +.vp-doc table:not(.table) tr:nth-child(2n) { + background-color: var(--vp-c-bg-soft); +} + +.vp-doc table:not(.table) th, +.vp-doc table:not(.table) td { + border: 1px solid var(--vp-c-divider); + padding: 12px 16px; +} + +.vp-doc table:not(.table) th { + font-size: 16px; + font-weight: 600; + background-color: var(--vp-c-white-soft); +} + +.dark .vp-doc th { + background-color: var(--vp-c-black); +} + +/** + * Decorational elements + * -------------------------------------------------------------------------- */ + +.vp-doc hr { + margin: 16px 0; + border: none; + border-top: 1px solid var(--vp-c-divider-light); +} + +/** + * Custom Block + * -------------------------------------------------------------------------- */ + +.vp-doc .custom-block { + margin: 16px 0; +} + +.vp-doc .custom-block p { + margin: 8px 0; + line-height: 24px; +} + +.vp-doc .custom-block p:first-child { + margin: 0; +} + +.vp-doc .custom-block a { + color: inherit; + font-weight: 600; + text-decoration: underline; + transition: opacity 0.25s; +} + +.vp-doc .custom-block a:hover { + opacity: 0.6; +} + +.vp-doc .custom-block code { + font-size: var(--vp-custom-block-code-font-size); + font-weight: 700; + color: inherit; +} + +.vp-doc .custom-block div[class*='language-'] { + margin: 8px 0; +} + +.vp-doc .custom-block div[class*='language-'] code { + font-weight: 400; + background-color: transparent; +} + +/** + * Code + * -------------------------------------------------------------------------- */ + +/* inline code */ +.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code { + font-size: var(--vp-code-font-size); +} + +.vp-doc :not(pre) > code { + border-radius: 4px; + padding: 3px 6px; + color: var(--vp-c-text-code); + background-color: var(--vp-c-bg-mute); + transition: color 0.5s, background-color 0.5s; +} + +.vp-doc h1 > code, +.vp-doc h2 > code, +.vp-doc h3 > code { + font-size: 0.9em; +} + +.vp-doc a > code { + color: var(--vp-c-brand); + transition: color 0.25s; +} + +.vp-doc a:hover > code { + color: var(--vp-c-brand-dark); +} + +.vp-doc div[class*='language-'] { + position: relative; + margin: 16px -24px; + background-color: var(--vp-code-block-bg); + overflow-x: auto; + transition: background-color 0.5s; +} + +@media (min-width: 640px) { + .vp-doc div[class*='language-'] { + border-radius: 8px; + margin: 16px 0; + } +} + +@media (max-width: 639px) { + .vp-doc li div[class*='language-'] { + border-radius: 8px 0 0 8px; + } +} + +.vp-doc div[class*='language-'] + div[class*='language-'], +.vp-doc div[class$='-api'] + div[class*='language-'], +.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] { + margin-top: -8px; +} + +.vp-doc [class*='language-'] pre, +.vp-doc [class*='language-'] code { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +.vp-doc [class*='language-'] pre { + position: relative; + z-index: 1; + margin: 0; + padding: 16px 0; + background: transparent; + overflow-x: auto; +} + +.vp-doc [class*='language-'] code { + display: block; + padding: 0 24px; + width: fit-content; + min-width: 100%; + max-height: 560px; + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-block-color); + transition: color 0.5s; +} + +.vp-doc [class*='language-'] code .highlighted { + background-color: var(--vp-code-line-highlight-color); + transition: background-color 0.5s; + margin: 0 -24px; + padding: 0 24px; + width: calc(100% + 2 * 24px); + display: inline-block; +} + +.vp-doc div[class*='language-'].line-numbers-mode { + padding-left: 32px; +} + +.vp-doc .line-numbers-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 3; + border-right: 1px solid var(--vp-c-divider-dark-2); + padding-top: 16px; + width: 32px; + text-align: center; + font-family: var(--vp-font-family-mono); + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-line-number-color); + transition: border-color 0.5s, color 0.5s; +} + +.vp-doc [class*='language-'] > button.copy { + position: absolute; + top: 8px; + right: 8px; + z-index: 3; + display: block; + justify-content: center; + align-items: center; + border-radius: 4px; + width: 40px; + height: 40px; + background-color: var(--vp-code-block-bg); + opacity: 0; + cursor: pointer; + background-image: var(--vp-icon-copy); + background-position: 50%; + background-size: 20px; + background-repeat: no-repeat; + transition: opacity 0.4s; +} + +.vp-doc [class*='language-']:hover > button.copy, +.vp-doc [class*='language-'] > button.copy:focus { + opacity: 1; +} + +.vp-doc [class*='language-'] > button.copy:hover { + background-color: var(--vp-code-copy-code-hover-bg); +} + +.vp-doc [class*='language-'] > button.copy.copied, +.vp-doc [class*='language-'] > button.copy:hover.copied { + border-radius: 0 4px 4px 0; + background-color: var(--vp-code-copy-code-hover-bg); + background-image: var(--vp-icon-copied); +} + +.vp-doc [class*='language-'] > button.copy.copied::before, +.vp-doc [class*='language-'] > button.copy:hover.copied::before { + position: relative; + left: -65px; + display: block; + border-radius: 4px 0 0 4px; + padding-top: 8px; + width: 64px; + height: 40px; + text-align: center; + font-size: 12px; + font-weight: 500; + color: var(--vp-code-copy-code-active-text); + background-color: var(--vp-code-copy-code-hover-bg); + white-space: nowrap; + content: 'Copied'; +} + +.vp-doc [class*='language-'] > span.lang { + position: absolute; + top: 6px; + right: 12px; + z-index: 2; + font-size: 12px; + font-weight: 500; + color: var(--vp-c-text-dark-3); + transition: color 0.4s, opacity 0.4s; +} + +.vp-doc [class*='language-']:hover > button.copy + span.lang, +.vp-doc [class*='language-'] > button.copy:focus + span.lang { + opacity: 0; +} + +/** + * Component: Team + * -------------------------------------------------------------------------- */ + +.vp-doc .VPTeamMembers { + margin-top: 24px; +} + +.vp-doc .VPTeamMembers.small.count-1 .container { + margin: 0 !important; + max-width: calc((100% - 24px) / 2) !important; +} + +.vp-doc .VPTeamMembers.small.count-2 .container, +.vp-doc .VPTeamMembers.small.count-3 .container { + max-width: 100% !important; +} + +.vp-doc .VPTeamMembers.medium.count-1 .container { + margin: 0 !important; + max-width: calc((100% - 24px) / 2) !important; +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-sponsor.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-sponsor.css new file mode 100644 index 0000000000000000000000000000000000000000..32da1de9580d0e12a58f275113b520764c413ae7 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/components/vp-sponsor.css @@ -0,0 +1,155 @@ +/** + * VPSponsors styles are defined as global because a new class gets + * allied in onMounted` hook and we can't use socped style. + */ +.vp-sponsor { + border-radius: 16px; + overflow: hidden; +} + +.vp-sponsor.aside { + border-radius: 12px; +} + +.vp-sponsor-section + .vp-sponsor-section { + margin-top: 4px; +} + +.vp-sponsor-tier { + margin-bottom: 4px; + text-align: center; + letter-spacing: 1px; + line-height: 24px; + width: 100%; + font-weight: 600; + color: var(--vp-c-text-2); + background-color: var(--vp-c-bg-soft); +} + +.vp-sponsor.normal .vp-sponsor-tier { + padding: 13px 0 11px; + font-size: 14px; +} + +.vp-sponsor.aside .vp-sponsor-tier { + padding: 9px 0 7px; + font-size: 12px; +} + +.vp-sponsor-grid + .vp-sponsor-tier { + margin-top: 4px; +} + +.vp-sponsor-grid { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.vp-sponsor-grid.xmini .vp-sponsor-grid-link { + height: 64px; +} +.vp-sponsor-grid.xmini .vp-sponsor-grid-image { + max-width: 64px; + max-height: 22px; +} + +.vp-sponsor-grid.mini .vp-sponsor-grid-link { + height: 72px; +} +.vp-sponsor-grid.mini .vp-sponsor-grid-image { + max-width: 96px; + max-height: 24px; +} + +.vp-sponsor-grid.small .vp-sponsor-grid-link { + height: 96px; +} +.vp-sponsor-grid.small .vp-sponsor-grid-image { + max-width: 96px; + max-height: 24px; +} + +.vp-sponsor-grid.medium .vp-sponsor-grid-link { + height: 112px; +} +.vp-sponsor-grid.medium .vp-sponsor-grid-image { + max-width: 120px; + max-height: 36px; +} + +.vp-sponsor-grid.big .vp-sponsor-grid-link { + height: 184px; +} +.vp-sponsor-grid.big .vp-sponsor-grid-image { + max-width: 192px; + max-height: 56px; +} + +.vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item { + width: calc((100% - 4px) / 2); +} + +.vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item { + width: calc((100% - 4px * 2) / 3); +} + +.vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item { + width: calc((100% - 4px * 3) / 4); +} + +.vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item { + width: calc((100% - 4px * 4) / 5); +} + +.vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item { + width: calc((100% - 4px * 5) / 6); +} + +.vp-sponsor-grid-item { + flex-shrink: 0; + width: 100%; + background-color: var(--vp-c-bg-soft); + transition: background-color 0.25s; +} + +.vp-sponsor-grid-item:hover { + background-color: var(--vp-c-bg-mute); +} + +.vp-sponsor-grid-item:hover .vp-sponsor-grid-image { + filter: grayscale(0) invert(0); +} + +.vp-sponsor-grid-item.empty:hover { + background-color: var(--vp-c-bg-soft); +} + +.dark .vp-sponsor-grid-item:hover { + background-color: var(--vp-c-white-soft); +} + +.dark .vp-sponsor-grid-item.empty:hover { + background-color: var(--vp-c-black-mute); +} + +.vp-sponsor-grid-link { + display: flex; +} + +.vp-sponsor-grid-box { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +.vp-sponsor-grid-image { + max-width: 100%; + filter: grayscale(1); + transition: filter 0.25s; +} + +.dark .vp-sponsor-grid-image { + filter: grayscale(1) invert(1); +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/fonts.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/fonts.css new file mode 100644 index 0000000000000000000000000000000000000000..7d18208c88be5cfa272157861a9b66e5ca5b983b --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/fonts.css @@ -0,0 +1,217 @@ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-greek.woff2') format('woff2'); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2'); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-greek.woff2') format('woff2'); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2'); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-cyrillic.woff2') format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-greek.woff2') format('woff2'); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-greek-ext.woff2') format('woff2'); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-latin.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-latin-ext.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Inter var experimental'; + font-weight: 100 900; + font-display: swap; + font-style: oblique 0deg 10deg; + src: url('../fonts/inter-vietnamese.woff2') format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/example-block.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/example-block.css new file mode 100644 index 0000000000000000000000000000000000000000..70d7e4f607be1a5adec1ca0657ab77f01f99f626 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/example-block.css @@ -0,0 +1,226 @@ +/********************************************************* +* Tokens +*/ +.namespace { + opacity: .7; +} + +.token.doctype .token.doctype-tag { + color: #569CD6; +} + +.token.doctype .token.name { + color: #9cdcfe; +} + +.token.comment, +.token.prolog { + color: #6a9955; +} + +.token.punctuation, +.language-html .language-css .token.punctuation, +.language-html .language-javascript .token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.inserted, +.token.unit { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.deleted { + color: #ce9178; +} + +.language-css .token.string.url { + text-decoration: underline; +} + +.token.operator, +.token.entity { + color: #d4d4d4; +} + +.token.operator.arrow { + color: #569CD6; +} + +.token.atrule { + color: #ce9178; +} + +.token.atrule .token.rule { + color: #c586c0; +} + +.token.atrule .token.url { + color: #9cdcfe; +} + +.token.atrule .token.url .token.function { + color: #dcdcaa; +} + +.token.atrule .token.url .token.punctuation { + color: #d4d4d4; +} + +.token.keyword { + color: #569CD6; +} + +.token.keyword.module, +.token.keyword.control-flow { + color: #c586c0; +} + +.token.function, +.token.function .token.maybe-class-name { + color: #dcdcaa; +} + +.token.regex { + color: #d16969; +} + +.token.important { + color: #569cd6; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name, +.token.maybe-class-name { + color: #4ec9b0; +} + +.token.console { + color: #9cdcfe; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property, +.token.variable, +.token.imports .token.maybe-class-name, +.token.exports .token.maybe-class-name { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.escape { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.tag .token.punctuation { + color: #808080; +} + +.token.cdata { + color: #808080; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value, +.token.attr-value .token.punctuation { + color: #ce9178; +} + +.token.attr-value .token.punctuation.attr-equals { + color: #d4d4d4; +} + +.token.entity { + color: #569cd6; +} + +.token.namespace { + color: #4ec9b0; +} +/********************************************************* +* Language Specific +*/ + +pre[class*="language-javascript"], +code[class*="language-javascript"], +pre[class*="language-jsx"], +code[class*="language-jsx"], +pre[class*="language-typescript"], +code[class*="language-typescript"], +pre[class*="language-tsx"], +code[class*="language-tsx"] { + color: #9cdcfe; +} + +pre[class*="language-css"], +code[class*="language-css"] { + color: #ce9178; +} + +pre[class*="language-html"], +code[class*="language-html"] { + color: #d4d4d4; +} + +.language-regex .token.anchor { + color: #dcdcaa; +} + +.language-html .token.punctuation { + color: #808080; +} +/********************************************************* +* Line highlighting +*/ +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} + +.line-highlight.line-highlight { + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + z-index: 0; +} \ No newline at end of file diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css new file mode 100644 index 0000000000000000000000000000000000000000..330f90ee62db9db7a6a95a4975579afe47b9ba9f --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css @@ -0,0 +1,12 @@ +#nprogress .bar { + background: var(--vp-c-brand); +} + +#nprogress .spinner-icon { + border-top-color: var(--vp-c-brand); + border-left-color: var(--vp-c-brand); +} + +#nprogress .peg { + box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand); +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/utils.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/utils.css new file mode 100644 index 0000000000000000000000000000000000000000..65c7e55ec30ba4ed830225bc666853477337026e --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/utils.css @@ -0,0 +1,9 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + white-space: nowrap; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/styles/vars.css b/packages/charts-vue/docs/.vitepress/farris-theme/styles/vars.css new file mode 100644 index 0000000000000000000000000000000000000000..83208adfde5369662026d97e9bc4866a1bb2b1d1 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/styles/vars.css @@ -0,0 +1,581 @@ +/** + * Colors Base + * + * These are the pure base color presets. Most of the time, you should not be + * using these colors directly in the theme but rather use "Colors Theme" + * instead because those are "Theme (light or dark)" dependant. + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-white: #ffffff; + --vp-c-white-soft: #f9f9f9; + --vp-c-white-mute: #f1f1f1; + + --vp-c-black: #1a1a1a; + --vp-c-black-pure: #000000; + --vp-c-black-soft: #17171A; + --vp-c-black-mute: #2f2f2f; + + --vp-c-gray: #8e8e8e; + --vp-c-gray-light-1: #aeaeae; + --vp-c-gray-light-2: #c7c7c7; + --vp-c-gray-light-3: #d1d1d1; + --vp-c-gray-light-4: #e5e5e5; + --vp-c-gray-light-5: #f2f2f2; + --vp-c-gray-dark-1: #636363; + --vp-c-gray-dark-2: #484848; + --vp-c-gray-dark-3: #3a3a3a; + --vp-c-gray-dark-4: #282828; + --vp-c-gray-dark-5: #202020; + + --vp-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vp-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vp-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vp-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vp-c-text-light-1: var(--vp-c-indigo); + --vp-c-text-light-2: #B4BCCC; + --vp-c-text-light-3: rgba(60, 60, 60, 0.33); + --vp-c-text-light-4: rgba(60, 60, 60, 0.18); + + --vp-c-text-dark-1: rgba(255, 255, 255, 0.87); + --vp-c-text-dark-2: rgba(235, 235, 235, 0.6); + --vp-c-text-dark-3: rgba(235, 235, 235, 0.38); + --vp-c-text-dark-4: rgba(235, 235, 235, 0.18); + + --vp-c-indigo: #213547; + --vp-c-indigo-soft: #476582; + --vp-c-indigo-light: #aac8e4; + --vp-c-indigo-lighter: #c9def1; + --vp-c-indigo-dark: #1d2f3f; + --vp-c-indigo-darker: #14212e; + + --vp-c-green: #42b883; + --vp-c-green-light: #42d392; + --vp-c-green-lighter: #35eb9a; + --vp-c-green-dark: #33a06f; + --vp-c-green-darker: #155f3e; + --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5); + --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25); + --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05); + + --vp-c-yellow: #ffc517; + --vp-c-yellow-light: #fcd253; + --vp-c-yellow-lighter: #fcfc7c; + --vp-c-yellow-dark: #e0ad15; + --vp-c-yellow-darker: #ad850e; + --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5); + --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25); + --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05); + + --vp-c-red: #ed3c50; + --vp-c-red-light: #f54e82; + --vp-c-red-lighter: #fd1d7c; + --vp-c-red-dark: #cd2d3f; + --vp-c-red-darker: #ab2131; + --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5); + --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25); + --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05); + + --vp-c-blue: #3662FF; + --vp-c-blue-light: #488afc; + --vp-c-blue-lighter: #2096fd; + --vp-c-blue-dark: #234de5; + --vp-c-blue-darker: #113acd; + --vp-c-blue-dimm-1: rgba(54, 98, 255, 0.5); + --vp-c-blue-dimm-2: rgba(54, 98, 255, 0.25); + --vp-c-blue-dimm-3: rgba(54, 98, 255, 0.05); + + --character-title-text: #2d2f33; + --character-bg-text: #333; + --feature-text: #5A5E66; + + --footer-content-text-opacity: 0.65; + --footer-title-text-opacity: 0.85; + --footer-bg: #031233; + --footer-gz-bg: #fff; + + --footer-gap:160px; + + --character-distance-outer:15px; + --resource-bg-height:100px; + --nav-bg:#fff; + --nav-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15); + + --banner-text: url('/assets/banner-text.png'); + --banner-bg: url('/assets/banner-bg.png'); + + --resource-bg: #2a87ff; + --resource-heaer-bg: url('/assets/bg-resource-header.png'); + + --banner-left-top-001: url('/assets/banner-left-top-001.png'); + --banner-left-top-002: url('/assets/banner-left-top-002.png'); + --banner-left-bottom-001: url('/assets/banner-left-bottom-001.png'); + --banner-left-bottom-002: url('/assets/banner-left-bottom-002.png'); + --banner-right-top-002: url('/assets/banner-right-top-002.png'); + --banner-right-bottom-001: url('/assets/banner-right-bottom-001.png'); + --banner-right-bottom-002: url('/assets/banner-right-bottom-002.png'); + + --resource-bg-001: url('/assets/resource-001.png'); + --resource-bg-002: url('/assets/resource-002.png'); + --resource-bg-003: url('/assets/resource-003.png'); + --resource-bg-004: url('/assets/resource-004.png'); + --feature-main-bg:url('/assets/bg-feature-main.png'); + --feature-group-001-icon: url('/assets/feature-group1-icon.png'); + --feature-group-001-animate-left: url('/assets/feature-group1-003.png'); + --feature-group-001-animate-top: url('/assets/feature-group1-007.png'); + --feature-group-001-animate-right: url('/assets/feature-group1-008.png'); + --feature-group-001-animate-center: url('/assets/feature-group1-006.png'); + --feature-group-001-animate-right-bottom: url('/assets/feature-group1-005.png'); + --feature-group-001-animate-left-bottom: url('/assets/feature-group1-004.png'); + + --feature-group-002-icon: url('/assets/feature-group2-icon.png'); + --feature-group-002-animate-left: url('/assets/feature-group2-003.png'); + --feature-group-002-animate-right: url('/assets/feature-group2-004.png'); + --feature-group-002-animate-bottom: url('/assets/feature-group2-005.png'); + + --feature-group-003-icon: url('/assets/feature-group3-icon-dark.png'); + --feature-group-003-animate-left: url('/assets/feature-group3-007.png'); + --feature-group-003-animate-top: url('/assets/feature-group3-003.png'); + --feature-group-003-animate-right: url('/assets/feature-group3-004.png'); + --feature-group-003-animate-right-bottom: url('/assets/feature-group3-005.png'); + --feature-group-003-animate-left-bottom: url('/assets/feature-group3-006.png'); + + --webkit-scrollbar-track-bg:#fff; + --webkit-scrollbar-thumb-bg:rgba(0, 0, 0, .2); + --webkit-scrollbar-thumb-hover-bg:#CCD1DD; + --nav-link-bg: #DBE9FF; + --character-icon-height:72px; + --resource-item-width:25%; + --flex-direction:row; + --scale-size:1; + +} + +/** + * Colors Theme + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-bg: var(--vp-c-white); + --vp-c-bg-soft: var(--vp-c-white-soft); + --vp-c-bg-mute: var(--vp-c-white-mute); + --vp-c-bg-alt: var(--vp-c-white-soft); + + --vp-c-divider: var(--vp-c-divider-light-1); + --vp-c-divider-light: var(--vp-c-divider-light-2); + + --vp-c-divider-inverse: var(--vp-c-divider-dark-1); + --vp-c-divider-inverse-light: var(--vp-c-divider-dark-2); + + --vp-c-text-1: var(--vp-c-text-light-1); + --vp-c-text-2: var(--vp-c-text-light-2); + --vp-c-text-3: var(--vp-c-text-light-3); + --vp-c-text-4: var(--vp-c-text-light-4); + + --vp-c-text-inverse-1: var(--vp-c-text-dark-1); + --vp-c-text-inverse-2: var(--vp-c-text-dark-2); + --vp-c-text-inverse-3: var(--vp-c-text-dark-3); + --vp-c-text-inverse-4: var(--vp-c-text-dark-4); + + --vp-c-text-code: var(--vp-c-indigo-soft); + + --vp-c-brand: var(--vp-c-blue); + --vp-c-brand-light: var(--vp-c-blue-light); + --vp-c-brand-lighter: var(--vp-c-blue-lighter); + --vp-c-brand-dark: var(--vp-c-blue-dark); + --vp-c-brand-darker: var(--vp-c-blue-darker); + + --vp-c-sponsor: #fd1d7c; +} + +.dark { + --vp-c-bg: var(--vp-c-black-soft); + --vp-c-bg-soft: var(--vp-c-black-mute); + --vp-c-bg-mute: var(--vp-c-gray-dark-3); + --vp-c-bg-alt: var(--vp-c-black); + + --vp-c-divider: var(--vp-c-divider-dark-1); + --vp-c-divider-light: var(--vp-c-divider-dark-2); + + --vp-c-divider-inverse: var(--vp-c-divider-light-1); + --vp-c-divider-inverse-light: var(--vp-c-divider-light-2); + + --vp-c-text-1: var(--vp-c-text-dark-1); + --vp-c-text-2: var(--vp-c-text-dark-2); + --vp-c-text-3: var(--vp-c-text-dark-3); + --vp-c-text-4: var(--vp-c-text-dark-4); + + --vp-c-text-inverse-1: var(--vp-c-text-light-1); + --vp-c-text-inverse-2: var(--vp-c-text-light-2); + --vp-c-text-inverse-3: var(--vp-c-text-light-3); + --vp-c-text-inverse-4: var(--vp-c-text-light-4); + + --vp-c-text-code: var(--vp-c-indigo-lighter); + + --nav-bg:#131318; + --nav-box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 0.15); + --banner-left-top-001: url('/assets/banner-left-top-001-dark.png'); + --banner-left-top-002: url('/assets/banner-left-top-002-dark.png'); + --banner-left-bottom-001: url('/assets/banner-left-bottom-001-dark.png'); + --banner-left-bottom-002: url('/assets/banner-left-bottom-002-dark.png'); + --banner-right-top-002: url('/assets/banner-right-top-002-dark.png'); + --banner-right-bottom-001: url('/assets/banner-right-bottom-001-dark.png'); + --banner-right-bottom-002: url('/assets/banner-right-bottom-002-dark.png'); + --webkit-scrollbar-track-bg:#19191C; + --webkit-scrollbar-thumb-bg:#38383C; + --webkit-scrollbar-thumb-hover-bg:#68686B; + + --banner-text: url('/assets/banner-text-dark.png'); + --banner-bg: url('/assets/banner-bg-dark.png'); + + --resource-bg: #17171A; + --resource-heaer-bg: url('/assets/bg-resource-header-dark.png'); + + --character-title-text: #fff; + --character-bg-text: #fff; + --feature-text: rgba(255, 255, 255, 0.65); + --resource-bg-001: url('/assets/resource-001-dark.png'); + --resource-bg-002: url('/assets/resource-002-dark.png'); + --resource-bg-003: url('/assets/resource-003-dark.png'); + --resource-bg-004: url('/assets/resource-004-dark.png'); + + --feature-main-bg:url('/assets/bg-feature-main-dark.png'); + --nav-link-bg: rgba(42,135,255,0.15); + --footer-bg: #0D1118; + --feature-group-001-icon: url('/assets/feature-group1-icon-dark.png'); + --feature-group-001-animate-left: url('/assets/feature-group1-003-dark.png'); + --feature-group-001-animate-top: url('/assets/feature-group1-007-dark.png'); + --feature-group-001-animate-right: url('/assets/feature-group1-008-dark.png'); + --feature-group-001-animate-center: url('/assets/feature-group1-006-dark.png'); + --feature-group-001-animate-right-bottom: url('/assets/feature-group1-005-dark.png'); + --feature-group-001-animate-left-bottom: url('/assets/feature-group1-004-dark.png'); + + --feature-group-002-icon: url('/assets/feature-group2-icon-dark.png'); + --feature-group-002-animate-left: url('/assets/feature-group2-003-dark.png'); + --feature-group-002-animate-right: url('/assets/feature-group2-004-dark.png'); + --feature-group-002-animate-bottom: url('/assets/feature-group2-005-dark.png'); + + --feature-group-003-icon: url('/assets/feature-group3-icon-dark.png'); + --feature-group-003-animate-left: url('/assets/feature-group3-007-dark.png'); + --feature-group-003-animate-top: url('/assets/feature-group3-003-dark.png'); + --feature-group-003-animate-right: url('/assets/feature-group3-004-dark.png'); + --feature-group-003-animate-right-bottom: url('/assets/feature-group3-005-dark.png'); + --feature-group-003-animate-left-bottom: url('/assets/feature-group3-006-dark.png'); + +} + +/** + * Typography + * -------------------------------------------------------------------------- */ + +:root { + --vp-font-family-base: 'PingFangSC-Regular', -apple-system, 'Microsoft YaHei', + 'Helvetica Neue', + Helvetica, + Arial, + sans-serif; + --vp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace; + --vp-font-family-title: 'PingFangSC-Medium', -apple-system, BlinkMacSystemFont, 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif +} + +/** + * Shadows + * -------------------------------------------------------------------------- */ + +:root { + --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); + --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07); + --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08); + --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12); + --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16); +} + +/** + * Z-indexes + + * -------------------------------------------------------------------------- */ + +:root { + --vp-z-index-local-nav: 1050; + --vp-z-index-nav: 20; + --vp-z-index-backdrop: 1100; + --vp-z-index-sidebar: 1200; + --vp-z-index-footer: 50; + + --vp-z-index-back-to-top:1000; +} + +/** + * Icons + * -------------------------------------------------------------------------- */ + +:root { + --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"); + --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"); +} + +/** + * Layouts + * -------------------------------------------------------------------------- */ + +:root { + --vp-layout-max-width: 1440px; +} + +/** + * Component: Code + * -------------------------------------------------------------------------- */ + +:root { + --vp-code-line-height: 1.7; + --vp-code-font-size: 14px; + + --vp-code-block-color: var(--vp-c-text-dark-1); + --vp-code-block-bg: #292d3e; + + --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5); + --vp-code-line-number-color: var(--vp-c-text-dark-3); + + --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05); + --vp-code-copy-code-active-text: var(--vp-c-text-dark-2); +} + +.dark { + --vp-code-block-bg: var(--vp-c-bg-alt); +} + +/** + * Component: Button + * -------------------------------------------------------------------------- */ + +:root { + --vp-button-brand-border: var(--vp-c-brand-light); + --vp-button-brand-text: var(--vp-c-text-dark-1); + --vp-button-brand-bg: var(--vp-c-brand); + --vp-button-brand-hover-border: var(--vp-c-brand-light); + --vp-button-brand-hover-text: var(--vp-c-text-dark-1); + --vp-button-brand-hover-bg: var(--vp-c-brand-light); + --vp-button-brand-active-border: var(--vp-c-brand-light); + --vp-button-brand-active-text: var(--vp-c-text-dark-1); + --vp-button-brand-active-bg: var(--vp-button-brand-bg); + + --vp-button-alt-border: var(--vp-c-gray-light-3); + --vp-button-alt-text: var(--vp-c-text-light-1); + --vp-button-alt-bg: var(--vp-c-gray-light-5); + --vp-button-alt-hover-border: var(--vp-c-gray-light-3); + --vp-button-alt-hover-text: var(--vp-c-text-light-1); + --vp-button-alt-hover-bg: var(--vp-c-gray-light-4); + --vp-button-alt-active-border: var(--vp-c-gray-light-3); + --vp-button-alt-active-text: var(--vp-c-text-light-1); + --vp-button-alt-active-bg: var(--vp-c-gray-light-3); + + --vp-button-sponsor-border: var(--vp-c-gray-light-3); + --vp-button-sponsor-text: var(--vp-c-text-light-2); + --vp-button-sponsor-bg: transparent; + --vp-button-sponsor-hover-border: var(--vp-c-sponsor); + --vp-button-sponsor-hover-text: var(--vp-c-sponsor); + --vp-button-sponsor-hover-bg: transparent; + --vp-button-sponsor-active-border: var(--vp-c-sponsor); + --vp-button-sponsor-active-text: var(--vp-c-sponsor); + --vp-button-sponsor-active-bg: transparent; +} + +.dark { + --vp-button-brand-border: var(--vp-c-brand-light); + --vp-button-brand-text: var(--vp-c-text-dark-1); + --vp-button-brand-bg: var(--vp-c-brand-dark); + --vp-button-brand-hover-border: var(--vp-c-brand-lighter); + --vp-button-brand-hover-text: var(--vp-c-text-dark-1); + --vp-button-brand-hover-bg: var(--vp-c-brand); + --vp-button-brand-active-border: var(--vp-c-brand-lighter); + --vp-button-brand-active-text: var(--vp-c-text-dark-1); + --vp-button-brand-active-bg: var(--vp-button-brand-bg); + + --vp-button-alt-border: var(--vp-c-gray-dark-2); + --vp-button-alt-text: var(--vp-c-text-dark-1); + --vp-button-alt-bg: var(--vp-c-bg-mute); + --vp-button-alt-hover-border: var(--vp-c-gray-dark-2); + --vp-button-alt-hover-text: var(--vp-c-text-dark-1); + --vp-button-alt-hover-bg: var(--vp-c-gray-dark-2); + --vp-button-alt-active-border: var(--vp-c-gray-dark-2); + --vp-button-alt-active-text: var(--vp-c-text-dark-1); + --vp-button-alt-active-bg: var(--vp-button-alt-bg); + + --vp-button-sponsor-border: var(--vp-c-gray-dark-1); + --vp-button-sponsor-text: var(--vp-c-text-dark-2); + +} + +/** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + +:root { + --vp-custom-block-code-font-size: 13px; + + --vp-custom-block-info-border: var(--vp-c-divider-light); + --vp-custom-block-info-text: var(--vp-c-text-2); + --vp-custom-block-info-bg: var(--vp-c-white-soft); + --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4); + + --vp-custom-block-tip-border: var(--vp-c-blue-dimm-1); + --vp-custom-block-tip-text: var(--vp-c-blue-darker); + --vp-custom-block-tip-bg: var(--vp-c-blue-dimm-3); + --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg); + + --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1); + --vp-custom-block-warning-text: var(--vp-c-yellow-darker); + --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3); + --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg); + + --vp-custom-block-danger-border: var(--vp-c-red-dimm-1); + --vp-custom-block-danger-text: var(--vp-c-red-darker); + --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3); + --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg); + + --vp-custom-block-details-border: var(--vp-custom-block-info-border); + --vp-custom-block-details-text: var(--vp-custom-block-info-text); + --vp-custom-block-details-bg: var(--vp-custom-block-info-bg); + --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg); +} + +.dark { + --vp-custom-block-info-border: var(--vp-c-divider-light); + --vp-custom-block-info-bg: var(--vp-c-black-mute); + --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4); + + --vp-custom-block-tip-border: var(--vp-c-blue-dimm-2); + --vp-custom-block-tip-text: var(--vp-c-blue-light); + + --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2); + --vp-custom-block-warning-text: var(--vp-c-yellow-light); + + --vp-custom-block-danger-border: var(--vp-c-red-dimm-2); + --vp-custom-block-danger-text: var(--vp-c-red-light); +} + +/** + * Component: Nav + * -------------------------------------------------------------------------- */ + +:root { + --vp-nav-height: var(--vp-nav-height-mobile); + --vp-nav-height-mobile: 56px; + --vp-nav-height-desktop: 64px; +} + +@media (min-width: 960px) { + :root { + --vp-nav-height: var(--vp-nav-height-desktop); + } +} + +/** + * Component: Sidebar + * -------------------------------------------------------------------------- */ + +:root { + --vp-sidebar-width: 272px; +} + +/** + * Component: Home + * -------------------------------------------------------------------------- */ + +:root { + --vp-home-hero-name-color: var(--vp-c-brand); + --vp-home-hero-name-background: transparent; + + --vp-home-hero-image-background-image: none; + --vp-home-hero-image-filter: none; +} +@media(max-width:1660px) { +} +@media(max-width:1440px) { + :root{ + --vp-layout-max-width:90%; + } +} +@media(max-width:1240px) { + +} +@media(max-width:1000px) { + :root{ + --resource-item-width:48%; + --footer-gap:60px; + } + +} +@media(max-width:830px) { + :root{ + --character-icon-height:72px; + --flex-direction:column; + } + .farris-doc-banner-wrapper .banner-text{ + width: 80%!important; + margin-left: -40%!important; + background-size:contain; + } + .farris-doc-banner .banner-content>*{ + scale: .7; + } +} +@media(max-width:730px) { + +} +@media(max-width:639px) { + :root{ + --resource-item-width:90%; + --footer-gap:80px; + --scale-size:0.9; + --character-distance-outer:6px; + --resource-bg-height:140px; + } + .banner-content .banner-scene { + animation-iteration-count:0!important; + } + .banner-content .banner-right-top{ + display: none; + } + .farris-doc-feature--content{ + width: 100% !important;; + } + .farris-docs-footer--content{ + display: block !important;; + } + .farris-docs-footer--content .content-intro{ + margin-bottom:20px; + justify-content: space-around; + } + .farris-docs-footer--content .content-gz{ + justify-content: space-around; + } + .content-gz .content-block p{ + margin-bottom:10px!important; + } + .content-gz .content-block img{ + width: 100px !important; + height:100px !important; + } + + .farris-docs-footer--bottom span{ + display: block; + margin:0 auto; + } +} +@media(max-width:420px) { + .farris-doc-character{ + max-width: 100%; + overflow:hidden; + height: 150px; + } + .farris-doc-character--row{ + display: inline-flex; + overflow-x:auto; + padding:10px; + } + .farris-doc-character--row .character-item{ + min-width: 120px; + } +} \ No newline at end of file diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/support/sidebar.ts b/packages/charts-vue/docs/.vitepress/farris-theme/support/sidebar.ts new file mode 100644 index 0000000000000000000000000000000000000000..b55fa1356f237b2dfb6aaa32634a299acf5fb86c --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/support/sidebar.ts @@ -0,0 +1,48 @@ +import type { DefaultTheme } from 'vitepress/theme' +import { ensureStartingSlash } from './utils.js' + +/** + * Get the `Sidebar` from sidebar option. This method will ensure to get correct + * sidebar config from `MultiSideBarConfig` with various path combinations such + * as matching `guide/` and `/guide/`. If no matching config was found, it will + * return empty array. + */ +export function getSidebar( + sidebar: DefaultTheme.Sidebar, + path: string +): DefaultTheme.SidebarGroup[] { + if (Array.isArray(sidebar)) { + return sidebar + } + + path = ensureStartingSlash(path) + + for (const dir in sidebar) { + // make sure the multi sidebar key starts with slash too + if (path.startsWith(ensureStartingSlash(dir))) { + return sidebar[dir] + } + } + + return [] +} + +export function getFlatSideBarLinks(sidebar: DefaultTheme.SidebarGroup[]) { + const links: { text: string; link: string }[] = [] + + function recursivelyExtractLinks(items: DefaultTheme.SidebarItem[]) { + for (const item of items) { + if (item.link) { + links.push({ ...item, link: item.link }) + } + if ('items' in item) { + recursivelyExtractLinks(item.items) + } + } + } + + for (const group of sidebar) { + recursivelyExtractLinks(group.items) + } + return links +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/support/socialIcons.ts b/packages/charts-vue/docs/.vitepress/farris-theme/support/socialIcons.ts new file mode 100644 index 0000000000000000000000000000000000000000..90fb19abfd33f39cbea405480d8287fd5baa1bfb --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/support/socialIcons.ts @@ -0,0 +1,20 @@ +// Used under CC0 1.0 from https://simpleicons.org/ + +export const icons = { + discord: + 'Discord', + facebook: + 'Facebook', + github: + 'GitHub', + instagram: + 'Instagram', + linkedin: + 'LinkedIn', + slack: + 'Slack', + twitter: + 'Twitter', + youtube: + 'YouTube' +} as const diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/support/utils.ts b/packages/charts-vue/docs/.vitepress/farris-theme/support/utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..f0a24345aa5e84342286e3029c55875e007aba00 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/support/utils.ts @@ -0,0 +1,89 @@ +import { ref } from 'vue' +import { withBase, useData } from 'vitepress' +import { EXTERNAL_URL_RE } from '../shared/shared' + +export const HASH_RE = /#.*$/ +export const EXT_RE = /(index)?\.(md|html)$/ + +const inBrowser = typeof window !== 'undefined' +const hashRef = ref(inBrowser ? location.hash : '') + +export function isExternal(path: string): boolean { + return EXTERNAL_URL_RE.test(path) +} + +export function throttleAndDebounce(fn: () => void, delay: number): () => void { + let timeout: any + let called = false + + return () => { + if (timeout) { + clearTimeout(timeout) + } + + if (!called) { + fn() + called = true + setTimeout(() => { + called = false + }, delay) + } else { + timeout = setTimeout(fn, delay) + } + } +} + +export function isActive( + currentPath: string, + matchPath?: string, + asRegex: boolean = false +): boolean { + if (matchPath === undefined) { + return false + } + + currentPath = normalize(`/${currentPath}`) + + if (asRegex) { + return new RegExp(matchPath).test(currentPath) + } + + if (normalize(matchPath) !== currentPath) { + return false + } + + const hashMatch = matchPath.match(HASH_RE) + + if (hashMatch) { + return hashRef.value === hashMatch[0] + } + + return true +} + +export function ensureStartingSlash(path: string): string { + return /^\//.test(path) ? path : `/${path}` +} + +export function normalize(path: string): string { + return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '') +} + +export function normalizeLink(url: string): string { + if (isExternal(url)) { + return url + } + + const { site } = useData() + const { pathname, search, hash } = new URL(url, 'http://example.com') + + const normalizedPath = + pathname.endsWith('/') || pathname.endsWith('.html') + ? url + : `${pathname.replace( + /(\.md)?$/, + site.value.cleanUrls === 'disabled' ? '.html' : '' + )}${search}${hash}` + + return withBase(normalizedPath) +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/types/default-theme.d.ts b/packages/charts-vue/docs/.vitepress/farris-theme/types/default-theme.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..752a67486ad73b4313b521dd73460b4290bafe54 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/types/default-theme.d.ts @@ -0,0 +1,263 @@ +export namespace DefaultTheme { + export interface Config { + /** + * The logo file of the site. + * + * @example '/logo.svg' + */ + logo?: ThemeableImage + + /** + * Custom site title in navbar. If the value is undefined, + * `config.title` will be used. + */ + siteTitle?: string | false + + /** + * Custom header levels of outline in the aside component. + * + * @default 2 + */ + outline?: number | [number, number] | 'deep' | false + + /** + * Custom outline title in the aside component. + * + * @default 'On this page' + */ + outlineTitle?: string + + /** + * The nav items. + */ + nav?: NavItem[] + + /** + * The sidebar items. + */ + sidebar?: Sidebar + + /** + * Info for the edit link. If it's undefined, the edit link feature will + * be disabled. + */ + editLink?: EditLink + + /** + * Set custom last updated text. + * + * @default 'Last updated' + */ + lastUpdatedText?: string + + /** + * Set custom prev/next labels. + */ + docFooter?: DocFooter + + /** + * The social links to be displayed at the end of the nav bar. Perfect for + * placing links to social services such as GitHub, Twitter, Facebook, etc. + */ + socialLinks?: SocialLink[] + + /** + * The footer configuration. + */ + footer?: Footer + + /** + * Adds locale menu to the nav. This option should be used when you have + * your translated sites outside of the project. + */ + localeLinks?: LocaleLinks + + /** + * The algolia options. Leave it undefined to disable the search feature. + */ + algolia?: AlgoliaSearchOptions + + /** + * The carbon ads options. Leave it undefined to disable the ads feature. + */ + carbonAds?: CarbonAdsOptions + } + + // nav ----------------------------------------------------------------------- + + export type NavItem = NavItemWithLink | NavItemWithChildren + + export type NavItemWithLink = { + text: string + link: string + + /** + * `activeMatch` is expected to be a regex string. We can't use actual + * RegExp object here because it isn't serializable + */ + activeMatch?: string + } + + export type NavItemChildren = { + text?: string + items: NavItemWithLink[] + } + + export interface NavItemWithChildren { + text?: string + items: (NavItemChildren | NavItemWithLink)[] + + /** + * `activeMatch` is expected to be a regex string. We can't use actual + * RegExp object here because it isn't serializable + */ + activeMatch?: string + } + + // image ----------------------------------------------------------------------- + + export type ThemeableImage = Image | { light: Image; dark: Image } + export type Image = string | { src: string; alt?: string } + + // sidebar ------------------------------------------------------------------- + + export type Sidebar = SidebarGroup[] | SidebarMulti + + export interface SidebarMulti { + [path: string]: SidebarGroup[] + } + + export interface SidebarGroup { + text?: string + items: SidebarItem[] + + /** + * If `true`, toggle button is shown. + * + * @default false + */ + collapsible?: boolean + + /** + * If `true`, collapsible group is collapsed by default. + * + * @default false + */ + collapsed?: boolean + } + + export type SidebarItem = + | { text: string; link: string } + | { text: string; link?: string; items: SidebarItem[] } + + // edit link ----------------------------------------------------------------- + + export interface EditLink { + /** + * Pattern for edit link. + * + * @example 'https://github.com/vuejs/vitepress/edit/main/docs/:path' + */ + pattern: string + + /** + * Custom text for edit link. + * + * @default 'Edit this page' + */ + text?: string + } + + // prev-next ----------------------------------------------------------------- + + export interface DocFooter { + /** + * Custom label for previous page button. + * + * @default 'Previous page' + */ + prev?: string + + /** + * Custom label for next page button. + * + * @default 'Next page' + */ + next?: string + } + + // social link --------------------------------------------------------------- + + export interface SocialLink { + icon: SocialLinkIcon + link: string + } + + export type SocialLinkIcon = + | 'discord' + | 'facebook' + | 'github' + | 'instagram' + | 'linkedin' + | 'slack' + | 'twitter' + | 'youtube' + | { svg: string } + + // footer -------------------------------------------------------------------- + + export interface Footer { + message?: string + copyright?: string + address?:string + } + + // team ---------------------------------------------------------------------- + + export interface TeamMember { + avatar: string + name: string + title?: string + org?: string + orgLink?: string + desc?: string + links?: SocialLink[] + sponsor?: string + } + + // locales ------------------------------------------------------------------- + + export interface LocaleLinks { + text: string + items: LocaleLink[] + } + + export interface LocaleLink { + text: string + link: string + } + + // algolia ------------------------------------------------------------------ + + /** + * The Algolia search options. Partially copied from + * `@docsearch/react/dist/esm/DocSearch.d.ts` + */ + export interface AlgoliaSearchOptions { + appId: string + apiKey: string + indexName: string + placeholder?: string + searchParameters?: any + disableUserPersonalization?: boolean + initialQuery?: string + buttonText?: string + } + + // carbon ads ---------------------------------------------------------------- + + export interface CarbonAdsOptions { + code: string + placement: string + } +} diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/types/index.d.ts b/packages/charts-vue/docs/.vitepress/farris-theme/types/index.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a8d52c89f29f3d244444490f517b071def0b278 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/types/index.d.ts @@ -0,0 +1,3 @@ +export * from './shared.js' +export * from '../dist/client/index.js' +export * from '../dist/node/index.js' diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/types/shared.d.ts b/packages/charts-vue/docs/.vitepress/farris-theme/types/shared.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..f37194dc1c2472a30fd02cae5540507e750fda86 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/farris-theme/types/shared.d.ts @@ -0,0 +1,109 @@ +// types shared between server and client +export type { DefaultTheme } from './default-theme.js' + +export type Awaitable = T | PromiseLike + +export interface PageData { + relativePath: string + title: string + titleTemplate?: string | boolean + description: string + headers: Header[] + frontmatter: Record + lastUpdated?: number +} + +export interface Header { + /** + * The level of the header + * + * `1` to `6` for `

` to `

` + */ + level: number + /** + * The title of the header + */ + title: string + /** + * The slug of the header + * + * Typically the `id` attr of the header anchor + */ + slug: string + /** + * Link of the header + * + * Typically using `#${slug}` as the anchor hash + */ + link: string + /** + * The children of the header + */ + children: Header[] +} + +export type CleanUrlsMode = + | 'disabled' + | 'without-subfolders' + | 'with-subfolders' + +export interface SiteData { + base: string + cleanUrls?: CleanUrlsMode + + /** + * Language of the site as it should be set on the `html` element. + * + * @example `en-US`, `zh-CN` + */ + lang: string + + title: string + titleTemplate?: string | boolean + description: string + head: HeadConfig[] + appearance: boolean + themeConfig: ThemeConfig + scrollOffset: number | string + locales: Record + + /** + * Available locales for the site when it has defined `locales` in its + * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or + * `/zh/`. + */ + langs: Record< + string, + { + /** + * Lang attribute as set on the `` element. + * @example `en-US`, `zh-CN` + */ + lang: string + /** + * Label to display in the language menu. + * @example `English`, `简体中文` + */ + label: string + } + > +} + +export type HeadConfig = + | [string, Record] + | [string, Record, string] + +export interface LocaleConfig { + lang: string + title?: string + titleTemplate?: string | boolean + description?: string + head?: HeadConfig[] + label?: string + selectText?: string +} + +export interface PageDataPayload { + path: string + pageData: PageData +} diff --git a/packages/charts-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts b/packages/charts-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts new file mode 100644 index 0000000000000000000000000000000000000000..2be2ee561a024fa83a4626bc576ccc89b17669af --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/plugins/farris-markdown-plugin.ts @@ -0,0 +1,126 @@ +import { highlight } from './../utils/highlight'; +import path from 'path'; +import fs from 'fs'; +import MarkdownIt from 'markdown-it'; +import mdContainer from 'markdown-it-container'; +import { render } from '../utils/render'; +import type Token from 'markdown-it/lib/token'; +import type Renderer from 'markdown-it/lib/renderer'; + +interface ContainerOpts { + marker?: string | undefined; + validate?(params: string): boolean; + render?(tokens: Token[], index: number, options: any, env: any, self: Renderer): string; +} + +const localMd = MarkdownIt(); + +export const farrisMarkdownPlugin = (md: MarkdownIt, options: any) => { + md.use(mdContainer, 'demo', { + validate(params: string) { + return !!params.trim().match(/^demo\s*(.*)$/); + }, + render(tokens: any[], index: number) { + const isTagOpening = tokens[index].nesting === 1; + const matchDescriptionResult = tokens[index].info.trim().match(/^demo\s*(.*)$/); + const hasDescription = matchDescriptionResult && matchDescriptionResult.length > 1; + if (isTagOpening) { + let sourceCode: string = tokens[index + 1].type === 'fence' ? tokens[index + 1].content : ''; + const startTag = '{'; + const endTag = '}'; + const hasVuePath = sourceCode.trim().indexOf(startTag) > -1 && sourceCode.indexOf(endTag) > -1; + if (hasVuePath) { + const start = sourceCode.indexOf(startTag) + startTag.length; + const end = sourceCode.indexOf(endTag, start); + const vueFilePath = sourceCode.slice(start, end); + sourceCode = fs.readFileSync(path.resolve('', vueFilePath), 'utf-8'); + tokens[index + 1].content = sourceCode; + } + return `${sourceCode ? `` : ''}`; + } else { + return ''; + } + } + }); + const lang = options?.lang || 'vue'; + const defaultRender = md.renderer.rules.fence; + md.renderer.rules.fence = (tokens: any[], index: number, option: any, env: any, self: any) => { + const token = tokens[index]; + const prevToken = tokens[index - 1]; + const isFenceInMDContainer = !!(prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/)); + const shouldOverrideRender = token.info.trim() === lang && isFenceInMDContainer; + if (shouldOverrideRender) { + const matchDescriptionResult = prevToken.info.trim().match(/^demo\s*(.*)$/); + const hasDescription = matchDescriptionResult && matchDescriptionResult.length > 1; + const description = hasDescription ? matchDescriptionResult[1] : ''; + return ` + ${ + description + ? `` + : '' + } + `; + } + return defaultRender ? defaultRender(tokens, index, options, env, self) : ''; + }; + const originalRender = md.render; + md.render = (src: string, env?: any) => { + let result = originalRender.call(md, src, env); + const startTag = ''; + const hasVueDemo = result.indexOf(startTag) > -1 && result.indexOf(endTag) > -1; + if (hasVueDemo) { + const { template, script, style } = render(result, options); + result = template; + const data = md['__data']; + const hoistedTags = data.hoistedTags || (data.hoistedTags = []); + hoistedTags.push(script); + hoistedTags.push(style); + } + return result; + }; + md.use(mdContainer, 'vdemo', { + validate(params) { + return !!params.trim().match(/^vdemo\s*(.*)$/); + }, + + render(tokens: any[], idx: number, option: any) { + const m = tokens[idx].info.trim().match(/^vdemo\s*(.*)$/); + if (tokens[idx].nesting === 1 /* means the tag is opening */) { + const description = m && m.length > 1 ? m[1] : ''; + const sourceFileToken = tokens[idx + 2]; + let source = ''; + let highlightSourceCode = ''; + // const sourceFile = sourceFileToken.children?.[0].content ?? ''; + const sourceFile: string = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : ''; + const startTag = '{'; + const endTag = '}'; + const hasVuePath = sourceFile.trim().indexOf(startTag) > -1 && sourceFile.indexOf(endTag) > -1; + if (hasVuePath) { + const start = sourceFile.indexOf(startTag) + startTag.length; + const end = sourceFile.indexOf(endTag, start); + const vueFilePath = sourceFile.slice(start, end); + source = fs.readFileSync(path.resolve('', vueFilePath), 'utf-8'); + highlightSourceCode = option.highlight(source, lang, ''); + } + + // if (sourceFileToken.type === 'inline') { + // source = fs.readFileSync(path.resolve(docRoot, 'examples', `${sourceFile}.vue`), 'utf-8'); + // } + if (!source) throw new Error(`Incorrect source file: ${sourceFile}`); + + return ``; + } else { + return ''; + } + } + } as ContainerOpts); +}; diff --git a/packages/charts-vue/docs/.vitepress/plugins/markdown-transform.ts b/packages/charts-vue/docs/.vitepress/plugins/markdown-transform.ts new file mode 100644 index 0000000000000000000000000000000000000000..289d40a7ce6fdc6a94fdce2d8ec71722931b90bc --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/plugins/markdown-transform.ts @@ -0,0 +1,54 @@ +import path from 'path'; + +import type { Plugin } from 'vite'; + +type Append = Record<'headers' | 'footers' | 'scriptSetups', string[]>; + +export function MarkdownTransform(): Plugin { + return { + name: 'md-transform', + enforce: 'pre', + async transform(code, id) { + if (id.endsWith('.md') && id.includes('/charts-vue/docs/components')) { + const pathFragements = id.split('/'); + const componentName = pathFragements[pathFragements.length - 2]; + const append: Append = { + headers: [], + footers: [], + scriptSetups: [`const demos = import.meta.globEager('../../../demos/${componentName}/*.vue')`] + }; + // code = transformVpScriptSetup(code, append); + return combineMarkdown(code, [combineScriptSetup(append.scriptSetups), ...append.headers], append.footers); + } + } + }; +} + +const combineScriptSetup = (codes: string[]) => + `\n +`; + +const combineMarkdown = (code: string, headers: string[], footers: string[]) => { + const frontmatterEndsPosition = code.indexOf('---\n\n'); + const frontmatterEnds = frontmatterEndsPosition > -1 ? frontmatterEndsPosition + 4 : 0; + // const firstSubheader = code.search(/\n## \w/); + const firstSubheader = code.search(/\n##/); + const sliceIndex = firstSubheader < 0 ? frontmatterEnds : firstSubheader; + + if (headers.length > 0) code = code.slice(0, sliceIndex) + headers.join('\n') + code.slice(sliceIndex); + code += footers.join('\n'); + + return `${code}\n`; +}; + +const vpScriptSetupRE = /([\s\S]*)<\/vp-script>/; + +const transformVpScriptSetup = (code: string, append: Append) => { + const matches = code.match(vpScriptSetupRE); + if (matches) code = code.replace(matches[0], ''); + const scriptSetup = matches?.[3] ?? ''; + if (scriptSetup) append.scriptSetups.push(scriptSetup); + return code; +}; diff --git a/packages/charts-vue/docs/.vitepress/theme/index.ts b/packages/charts-vue/docs/.vitepress/theme/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..2b4102e11cdb507cf46f52f96accd57d0a849821 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/theme/index.ts @@ -0,0 +1,15 @@ +import Farris from '../../../components'; +import FarrisTheme from '../farris-theme'; +import { registerComponents } from './register-components.js'; +import { insertBaiduScript } from './insert-baidu-script'; + +// import '../../../public/assets/farris-all.css'; + +export default { + ...FarrisTheme, + enhanceApp({ app }) { + app.use(Farris); + registerComponents(app); + insertBaiduScript(); + } +}; diff --git a/packages/charts-vue/docs/.vitepress/theme/insert-baidu-script.ts b/packages/charts-vue/docs/.vitepress/theme/insert-baidu-script.ts new file mode 100644 index 0000000000000000000000000000000000000000..fdae2d7ff16b71b8f30607c51d689fb4287858a5 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/theme/insert-baidu-script.ts @@ -0,0 +1,15 @@ +export function insertBaiduScript() { + if (typeof document === 'undefined') return; + const baiduScript = document.createElement('script'); + const baiduScriptStr = ` + var _hmt = _hmt || []; + (function() { + var hm = document.createElement("script"); + hm.src = "https://hm.baidu.com/hm.js?d837f6d4ecb051c0c1347ce79f6a831c"; + var s = document.getElementsByTagName("script")[0]; + s.parentNode.insertBefore(hm, s); + })(); + `; + baiduScript.textContent = baiduScriptStr; + document.body.append(baiduScript); +} diff --git a/packages/charts-vue/docs/.vitepress/theme/register-components.js b/packages/charts-vue/docs/.vitepress/theme/register-components.js new file mode 100644 index 0000000000000000000000000000000000000000..f753ce7191ee4f4918044c09aa879b0c47bb4576 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/theme/register-components.js @@ -0,0 +1,13 @@ +// import Demo from 'vitepress-theme-demoblock/components/Demo.vue'; +// import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'; +// export function registerComponents(app) { +// app.component('Demo', Demo); +// app.component('DemoBlock', DemoBlock); +// } + +import FExample from '../farris-theme/example/FExample.vue'; +import VPDemo from '../farris-theme/components/VPDemo.vue'; + +export function registerComponents(app) { + app.component('Demo', FExample).component('VPDemo', VPDemo); +} diff --git a/packages/charts-vue/docs/.vitepress/utils/highlight-shiki.ts b/packages/charts-vue/docs/.vitepress/utils/highlight-shiki.ts new file mode 100644 index 0000000000000000000000000000000000000000..ce5ee00397339b2c051b4a6f58d16c05a11fc528 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/utils/highlight-shiki.ts @@ -0,0 +1,73 @@ +import { IThemeRegistration, getHighlighter, HtmlRendererOptions } from 'shiki'; + +export type ThemeOptions = + | IThemeRegistration + | { light: IThemeRegistration; dark: IThemeRegistration } + +/** + * 2 steps: + * + * 1. convert attrs into line numbers: + * {4,7-13,16,23-27,40} -> [4,7,8,9,10,11,12,13,16,23,24,25,26,27,40] + * 2. convert line numbers into line options: + * [{ line: number, classes: string[] }] + */ +const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => { + const result: number[] = [] + if (!attrs.trim()) { + return [] + } + attrs + .split(',') + .map((v) => v.split('-').map((v) => parseInt(v, 10))) + .forEach(([start, end]) => { + if (start && end) { + result.push( + ...Array.from({ length: end - start + 1 }, (_, i) => start + i) + ) + } else { + result.push(start) + } + }) + return result.map((v) => ({ + line: v, + classes: ['highlighted'] + })) +} + +export async function highlight( + theme: ThemeOptions = 'material-palenight' +): Promise<(str: string, lang: string, attrs: string) => string> { + const hasSingleTheme = typeof theme === 'string' || 'name' in theme + const getThemeName = (themeValue: IThemeRegistration) => + typeof themeValue === 'string' ? themeValue : themeValue.name + + const highlighter = await getHighlighter({ + themes: hasSingleTheme ? [theme] : [theme.dark, theme.light] + }) + const preRE = /^/ + const vueRE = /-vue$/ + + return (str: string, lang: string, attrs: string) => { + const vPre = vueRE.test(lang) ? '' : 'v-pre' + lang = lang.replace(vueRE, '').toLowerCase() + + const lineOptions = attrsToLines(attrs) + + if (hasSingleTheme) { + return highlighter + .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme) }) + .replace(preRE, `
`)
+    }
+
+    const dark = highlighter
+      .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.dark) })
+      .replace(preRE, `
`)
+
+    const light = highlighter
+      .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.light) })
+      .replace(preRE, `
`)
+
+    return dark + light
+  }
+}
diff --git a/packages/charts-vue/docs/.vitepress/utils/highlight.ts b/packages/charts-vue/docs/.vitepress/utils/highlight.ts
new file mode 100644
index 0000000000000000000000000000000000000000..229fc5b2046e518482d2a4c053a88963b6e85f34
--- /dev/null
+++ b/packages/charts-vue/docs/.vitepress/utils/highlight.ts
@@ -0,0 +1,55 @@
+// ref https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/highlight.ts
+import chalk from 'chalk';
+import escapeHtml from 'escape-html';
+import prism from 'prismjs';
+
+// prism is listed as actual dep so it's ok to require
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const loadLanguages = require('prismjs/components/index');
+
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript','bash','typescript','ts']);
+
+function wrap(code: string, lang: string): string {
+    if (lang === 'text') {
+        code = escapeHtml(code)
+    }
+    return `
${code}
` +} + +export const highlight = (str: string, lang: string) => { + if (!lang) { + return wrap(str, 'text'); + } + lang = lang.toLowerCase(); + const rawLang = lang + if (lang === 'vue' || lang === 'html') { + lang = 'markup'; + } + if (lang === 'md') { + lang = 'markdown'; + } + if (lang === 'ts') { + lang = 'typescript'; + } + if (lang === 'py') { + lang = 'python'; + } + if (!prism.languages[lang]) { + try { + loadLanguages([lang]); + } catch { + // eslint-disable-next-line no-console + console.warn( + chalk.yellow( + `[vitepress] Syntax highlight for language "${lang}" is not supported.` + ) + ); + } + } + if (prism.languages[lang]) { + const code = prism.highlight(str, prism.languages[lang], lang); + return wrap(code, rawLang); + } + return wrap(str, 'text'); +} diff --git a/packages/charts-vue/docs/.vitepress/utils/parser.ts b/packages/charts-vue/docs/.vitepress/utils/parser.ts new file mode 100644 index 0000000000000000000000000000000000000000..6a18f61f35846233ea8f77f602ed60cc3bacb166 --- /dev/null +++ b/packages/charts-vue/docs/.vitepress/utils/parser.ts @@ -0,0 +1,96 @@ +import { compileTemplate, TemplateCompiler, compileScript, parse, SFCTemplateCompileOptions } from '@vue/compiler-sfc'; + +export function stripScript(content: string, id: string) { + const matchScriptResult = content.match(/<(script)(?:.* \bsetup\b)?[^>]*>([\s\S]+)<\/\1>/); + const sourceCode = matchScriptResult && matchScriptResult[0] ? matchScriptResult[0].trim() : ''; + if (sourceCode) { + const { descriptor } = parse(sourceCode); + const result = compileScript(descriptor, { refSugar: true, id }); + return result.content; + } + return sourceCode; +} + +export function stripStyle(content: string) { + const matchStyleResult = content.match(/<(style)[^>]*>([\s\S]+)<\/\1>/) + return matchStyleResult && matchStyleResult[2] ? matchStyleResult[2].trim() : '' +} + +export function stripTemplate(content: string) { + const contentWithoutScriptAndStyle = content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim(); + return contentWithoutScriptAndStyle; +} + +function pad(source: string) { + return source + .split(/\r?\n/) + .map(line => ` ${line}`) + .join('\n'); +} + +const templateReplaceRegex = /