mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-10-27 19:13:59 +08:00
feat: revamp demo
This commit is contained in:
Justineo
@ -1,498 +0,0 @@
|
||||
// Modified from https://github.com/apache/echarts-examples/blob/b644ced5325ea2522cb11606df54eae69bba3a3a/common/buildCode.js
|
||||
// See license at `./LICENSE`.
|
||||
|
||||
const COMPONENTS_MAP = {
|
||||
grid: "GridComponent",
|
||||
polar: "PolarComponent",
|
||||
geo: "GeoComponent",
|
||||
singleAxis: "SingleAxisComponent",
|
||||
parallel: "ParallelComponent",
|
||||
calendar: "CalendarComponent",
|
||||
matrix: "MatrixComponent",
|
||||
graphic: "GraphicComponent",
|
||||
toolbox: "ToolboxComponent",
|
||||
tooltip: "TooltipComponent",
|
||||
axisPointer: "AxisPointerComponent",
|
||||
brush: "BrushComponent",
|
||||
title: "TitleComponent",
|
||||
timeline: "TimelineComponent",
|
||||
markPoint: "MarkPointComponent",
|
||||
markLine: "MarkLineComponent",
|
||||
markArea: "MarkAreaComponent",
|
||||
legend: "LegendComponent",
|
||||
dataZoom: "DataZoomComponent",
|
||||
visualMap: "VisualMapComponent",
|
||||
thumbnail: "ThumbnailComponent",
|
||||
aria: "AriaComponent",
|
||||
dataset: "DatasetComponent",
|
||||
|
||||
// Dependencies
|
||||
xAxis: "GridComponent",
|
||||
yAxis: "GridComponent",
|
||||
angleAxis: "PolarComponent",
|
||||
radiusAxis: "PolarComponent",
|
||||
};
|
||||
|
||||
const CHARTS_MAP = {
|
||||
line: "LineChart",
|
||||
bar: "BarChart",
|
||||
pie: "PieChart",
|
||||
scatter: "ScatterChart",
|
||||
radar: "RadarChart",
|
||||
map: "MapChart",
|
||||
tree: "TreeChart",
|
||||
treemap: "TreemapChart",
|
||||
graph: "GraphChart",
|
||||
chord: "ChordChart",
|
||||
gauge: "GaugeChart",
|
||||
funnel: "FunnelChart",
|
||||
parallel: "ParallelChart",
|
||||
sankey: "SankeyChart",
|
||||
boxplot: "BoxplotChart",
|
||||
candlestick: "CandlestickChart",
|
||||
effectScatter: "EffectScatterChart",
|
||||
lines: "LinesChart",
|
||||
heatmap: "HeatmapChart",
|
||||
pictorialBar: "PictorialBarChart",
|
||||
themeRiver: "ThemeRiverChart",
|
||||
sunburst: "SunburstChart",
|
||||
custom: "CustomChart",
|
||||
};
|
||||
|
||||
const COMPONENTS_GL_MAP = {
|
||||
grid3D: "Grid3DComponent",
|
||||
geo3D: "Geo3DComponent",
|
||||
globe: "GlobeComponent",
|
||||
mapbox3D: "Mapbox3DComponent",
|
||||
maptalks3D: "Maptalks3DComponent",
|
||||
|
||||
// Dependencies
|
||||
xAxis3D: "Grid3DComponent",
|
||||
yAxis3D: "Grid3DComponent",
|
||||
zAxis3D: "Grid3DComponent",
|
||||
};
|
||||
|
||||
const CHARTS_GL_MAP = {
|
||||
bar3D: "Bar3DChart",
|
||||
line3D: "Line3DChart",
|
||||
scatter3D: "Scatter3DChart",
|
||||
lines3D: "Lines3DChart",
|
||||
polygons3D: "Polygons3DChart",
|
||||
surface: "SurfaceChart",
|
||||
map3D: "Map3DChart",
|
||||
|
||||
scatterGL: "ScatterGLChart",
|
||||
graphGL: "GraphGLChart",
|
||||
flowGL: "FlowGLChart",
|
||||
linesGL: "LinesGLChart",
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
"UniversalTransition",
|
||||
"LabelLayout",
|
||||
"AxisBreak",
|
||||
// "LegacyGridContainLabel",
|
||||
"ScatterJitter",
|
||||
];
|
||||
const RENDERERS_MAP = {
|
||||
canvas: "CanvasRenderer",
|
||||
svg: "SVGRenderer",
|
||||
};
|
||||
|
||||
const EXTENSIONS_MAP = {
|
||||
bmap: "bmap/bmap",
|
||||
// PENDING: There seem no examples that use dataTool
|
||||
// dataTool: 'dataTool'
|
||||
};
|
||||
|
||||
// Component that will be injected automatically in preprocessor
|
||||
// These should be excluded util find they were used explicitly.
|
||||
const MARKERS = ["markLine", "markArea", "markPoint"];
|
||||
const INJECTED_COMPONENTS = [
|
||||
...MARKERS,
|
||||
"grid",
|
||||
"axisPointer",
|
||||
"aria", // TODO aria
|
||||
];
|
||||
|
||||
// Component that was dependent.
|
||||
const DEPENDENT_COMPONENTS = [
|
||||
"xAxis",
|
||||
"yAxis",
|
||||
"angleAxis",
|
||||
"radiusAxis",
|
||||
"xAxis3D",
|
||||
"yAxis3D",
|
||||
"zAxis3D",
|
||||
];
|
||||
|
||||
function createReverseMap(map) {
|
||||
const reverseMap = {};
|
||||
Object.keys(map).forEach((key) => {
|
||||
// Exclude dependencies.
|
||||
if (DEPENDENT_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
}
|
||||
reverseMap[map[key]] = key;
|
||||
});
|
||||
|
||||
return reverseMap;
|
||||
}
|
||||
|
||||
const COMPONENTS_MAP_REVERSE = createReverseMap(COMPONENTS_MAP);
|
||||
const CHARTS_MAP_REVERSE = createReverseMap(CHARTS_MAP);
|
||||
const COMPONENTS_GL_MAP_REVERSE = createReverseMap(COMPONENTS_GL_MAP);
|
||||
const CHARTS_GL_MAP_REVERSE = createReverseMap(CHARTS_GL_MAP);
|
||||
|
||||
function collectDeps(option) {
|
||||
let deps = [];
|
||||
if (option.options) {
|
||||
// TODO getOption() doesn't have baseOption and options.
|
||||
option.options.forEach((opt) => {
|
||||
deps = deps.concat(collectDeps(opt));
|
||||
});
|
||||
|
||||
if (option.baseOption) {
|
||||
deps = deps.concat(collectDeps(option.baseOption));
|
||||
}
|
||||
|
||||
// Remove duplicates
|
||||
return Array.from(new Set(deps));
|
||||
}
|
||||
|
||||
Object.keys(option).forEach((key) => {
|
||||
if (INJECTED_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
}
|
||||
let val = option[key];
|
||||
|
||||
if (Array.isArray(val) && !val.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (COMPONENTS_MAP[key]) {
|
||||
deps.push(COMPONENTS_MAP[key]);
|
||||
}
|
||||
if (COMPONENTS_GL_MAP[key]) {
|
||||
deps.push(COMPONENTS_GL_MAP[key]);
|
||||
}
|
||||
if (EXTENSIONS_MAP[key]) {
|
||||
deps.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
const series = Array.isArray(option.series) ? option.series : [option.series];
|
||||
let hasScatterSeries = false;
|
||||
series.forEach((seriesOpt) => {
|
||||
if (seriesOpt.type === "scatter") {
|
||||
hasScatterSeries = true;
|
||||
}
|
||||
if (CHARTS_MAP[seriesOpt.type]) {
|
||||
deps.push(CHARTS_MAP[seriesOpt.type]);
|
||||
}
|
||||
if (CHARTS_GL_MAP[seriesOpt.type]) {
|
||||
deps.push(CHARTS_GL_MAP[seriesOpt.type]);
|
||||
}
|
||||
if (seriesOpt.type === "map") {
|
||||
// Needs geo component when using map
|
||||
deps.push(COMPONENTS_MAP.geo);
|
||||
}
|
||||
if (seriesOpt.coordinateSystem === "bmap") {
|
||||
deps.push("bmap");
|
||||
}
|
||||
MARKERS.forEach((markerType) => {
|
||||
if (seriesOpt[markerType]) {
|
||||
deps.push(COMPONENTS_MAP[markerType]);
|
||||
}
|
||||
});
|
||||
// Features
|
||||
if (seriesOpt.labelLayout) {
|
||||
deps.push("LabelLayout");
|
||||
}
|
||||
if (seriesOpt.universalTransition) {
|
||||
deps.push("UniversalTransition");
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(option).forEach((key) => {
|
||||
if (key.endsWith("Axis")) {
|
||||
const val = option[key];
|
||||
for (const axisOption of Array.isArray(val) ? val : [val]) {
|
||||
if (hasScatterSeries && +axisOption.jitter > 0) {
|
||||
deps.push("ScatterJitter");
|
||||
}
|
||||
if (axisOption.breaks && axisOption.breaks.length > 0) {
|
||||
deps.push("AxisBreak");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Dataset transform
|
||||
if (option.dataset && Array.isArray(option.dataset)) {
|
||||
option.dataset.forEach((dataset) => {
|
||||
if (dataset.transform) {
|
||||
deps.push("TransformComponent");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Remove duplicates
|
||||
return Array.from(new Set(deps));
|
||||
}
|
||||
|
||||
function buildMinimalBundleCode(
|
||||
deps,
|
||||
{
|
||||
includeType,
|
||||
semi = false,
|
||||
quote = "'",
|
||||
multiline = false,
|
||||
indent = " ",
|
||||
maxLen = 80,
|
||||
},
|
||||
) {
|
||||
const options = {
|
||||
semi,
|
||||
quote,
|
||||
multiline,
|
||||
indent,
|
||||
maxLen,
|
||||
};
|
||||
|
||||
const chartsImports = [];
|
||||
const componentsImports = [];
|
||||
const chartsGLImports = [];
|
||||
const componentsGLImports = [];
|
||||
const featuresImports = [];
|
||||
const renderersImports = [];
|
||||
const extensionImports = [];
|
||||
|
||||
deps.forEach((dep) => {
|
||||
if (dep.endsWith("Renderer")) {
|
||||
renderersImports.push(dep);
|
||||
} else if (CHARTS_MAP_REVERSE[dep]) {
|
||||
chartsImports.push(dep);
|
||||
if (includeType) {
|
||||
chartsImports.push(dep.replace(/Chart$/, "SeriesOption"));
|
||||
}
|
||||
} else if (COMPONENTS_MAP_REVERSE[dep]) {
|
||||
componentsImports.push(dep);
|
||||
if (includeType) {
|
||||
componentsImports.push(dep.replace(/Component$/, "ComponentOption"));
|
||||
}
|
||||
} else if (dep === "TransformComponent") {
|
||||
// TransformComponent don't have individual option type.
|
||||
// TODO will put in to an config if there are other similar components
|
||||
componentsImports.push(dep);
|
||||
} else if (CHARTS_GL_MAP_REVERSE[dep]) {
|
||||
chartsGLImports.push(dep);
|
||||
} else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
|
||||
componentsGLImports.push(dep);
|
||||
} else if (FEATURES.includes(dep)) {
|
||||
featuresImports.push(dep);
|
||||
} else if (EXTENSIONS_MAP[dep]) {
|
||||
extensionImports.push(dep);
|
||||
}
|
||||
});
|
||||
|
||||
const allImports = [
|
||||
...componentsImports,
|
||||
...chartsImports,
|
||||
...componentsGLImports,
|
||||
...chartsGLImports,
|
||||
...renderersImports,
|
||||
...featuresImports,
|
||||
];
|
||||
|
||||
const ECOptionTypeCode = typeItems(
|
||||
allImports.filter((a) => a.endsWith("Option")),
|
||||
options,
|
||||
);
|
||||
|
||||
const importSources = [
|
||||
[chartsImports, "echarts/charts"],
|
||||
[componentsImports, "echarts/components"],
|
||||
[featuresImports, "echarts/features"],
|
||||
[renderersImports, "echarts/renderers"],
|
||||
[chartsGLImports, "echarts-gl/charts"],
|
||||
[componentsGLImports, "echarts-gl/components"],
|
||||
].filter((a) => a[0].length > 0);
|
||||
const importStatements = importSources.map(([imports, mod]) =>
|
||||
importItems(
|
||||
imports.filter((a) => !a.endsWith("Option")),
|
||||
mod,
|
||||
options,
|
||||
),
|
||||
);
|
||||
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
getExtensionDeps(extensionImports, includeType).forEach((ext) => {
|
||||
importStatements.push(`import ${quote}${ext}${quote}${semiStr}`);
|
||||
});
|
||||
|
||||
if (includeType) {
|
||||
importStatements.push(
|
||||
`import type { ComposeOption } from ${quote}echarts/core${quote}${semiStr}`,
|
||||
);
|
||||
const importTypeStatements = importSources
|
||||
.map(([imports, mod]) =>
|
||||
importItems(
|
||||
imports.filter((a) => a.endsWith("Option")),
|
||||
mod,
|
||||
{ ...options, type: true },
|
||||
),
|
||||
)
|
||||
.filter(Boolean);
|
||||
importStatements.push(...importTypeStatements);
|
||||
}
|
||||
|
||||
return `import { use } from ${quote}echarts/core${quote}${semiStr}
|
||||
${importStatements.join("\n")}
|
||||
|
||||
${useItems(
|
||||
allImports.filter((a) => !a.endsWith("Option")),
|
||||
options,
|
||||
)}
|
||||
${includeType ? `\n${ECOptionTypeCode}` : ""}
|
||||
`;
|
||||
}
|
||||
function getExtensionDeps(deps, ts) {
|
||||
return deps
|
||||
.filter((dep) => EXTENSIONS_MAP[dep])
|
||||
.map(
|
||||
(dep) => `echarts/extension${ts ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`,
|
||||
);
|
||||
}
|
||||
|
||||
/** import */
|
||||
function importItems(items, module, options) {
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (multiline) {
|
||||
return importMultiLine(items, module, options);
|
||||
}
|
||||
|
||||
const singleLine = importSingleLine(items, module, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return importMultiLine(items, module, options);
|
||||
}
|
||||
|
||||
// import { foo, bar } from 'module'
|
||||
function importSingleLine(items, module, { type, semi, quote }) {
|
||||
const typeStr = type ? "type " : "";
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{ ${items.join(
|
||||
", ",
|
||||
)} } from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
// import {
|
||||
// foo,
|
||||
// bar
|
||||
// } from 'module'
|
||||
function importMultiLine(items, module, { type, indent, semi, quote }) {
|
||||
const typeStr = type ? "type " : "";
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{
|
||||
${items.map((item) => `${indent}${item}`).join(",\n")}
|
||||
} from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
/** use */
|
||||
function useItems(items, options) {
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (multiline) {
|
||||
return useMultiLine(items, options);
|
||||
}
|
||||
|
||||
const singleLine = useSingleLine(items, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return useMultiLine(items, options);
|
||||
}
|
||||
|
||||
// use([foo, bar])
|
||||
function useSingleLine(items, { semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `use([${items.join(`, `)}])${semiStr}`;
|
||||
}
|
||||
|
||||
// use([
|
||||
// foo,
|
||||
// bar
|
||||
// ])
|
||||
function useMultiLine(items, { indent, semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `use([
|
||||
${items.map((item) => `${indent}${item}`).join(`,\n`)}
|
||||
])${semiStr}`;
|
||||
}
|
||||
|
||||
/** type */
|
||||
function typeItems(items, options) {
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (multiline) {
|
||||
return typeMultiLine(items, options);
|
||||
}
|
||||
|
||||
const singleLine = typeSingleLine(items, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return typeMultiLine(items, options);
|
||||
}
|
||||
|
||||
// type EChartsOption = ComposeOption<FooOption | BarOption>
|
||||
function typeSingleLine(items, { semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `type EChartsOption = ComposeOption<${items.join(` | `)}>${semiStr}`;
|
||||
}
|
||||
|
||||
// type EChartsOption = ComposeOption<
|
||||
// | FooOption
|
||||
// | BarOption
|
||||
// >
|
||||
function typeMultiLine(items, { indent, semi }) {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `type EChartsOption = ComposeOption<
|
||||
${items.map((item) => `${indent}| ${item}`).join("\n")}
|
||||
>${semiStr}`;
|
||||
}
|
||||
|
||||
export function getImportsFromOption(
|
||||
option,
|
||||
{ renderer = "canvas", ...options },
|
||||
) {
|
||||
return buildMinimalBundleCode(
|
||||
[...collectDeps(option), RENDERERS_MAP[renderer]],
|
||||
options,
|
||||
);
|
||||
}
|
||||
618
demo/utils/codegen.ts
Normal file
618
demo/utils/codegen.ts
Normal file
@ -0,0 +1,618 @@
|
||||
// Modified from https://github.com/apache/echarts-examples/blob/b644ced5325ea2522cb11606df54eae69bba3a3a/common/buildCode.js
|
||||
// See license at `./LICENSE`.
|
||||
|
||||
type PlainObject = Record<string, unknown>;
|
||||
|
||||
export type Quote = "'" | '"';
|
||||
|
||||
interface FormatterOptions {
|
||||
includeType?: boolean;
|
||||
semi?: boolean;
|
||||
quote?: Quote;
|
||||
multiline?: boolean;
|
||||
indent?: string;
|
||||
maxLen?: number;
|
||||
type?: boolean;
|
||||
}
|
||||
|
||||
type FormatterOptionsWithDefaults = Required<
|
||||
Omit<FormatterOptions, "type" | "includeType">
|
||||
> &
|
||||
Pick<FormatterOptions, "type" | "includeType">;
|
||||
|
||||
function isPlainObject(value: unknown): value is PlainObject {
|
||||
return typeof value === "object" && value !== null;
|
||||
}
|
||||
|
||||
const COMPONENTS_MAP: Record<string, string> = {
|
||||
grid: "GridComponent",
|
||||
polar: "PolarComponent",
|
||||
geo: "GeoComponent",
|
||||
singleAxis: "SingleAxisComponent",
|
||||
parallel: "ParallelComponent",
|
||||
calendar: "CalendarComponent",
|
||||
matrix: "MatrixComponent",
|
||||
graphic: "GraphicComponent",
|
||||
toolbox: "ToolboxComponent",
|
||||
tooltip: "TooltipComponent",
|
||||
axisPointer: "AxisPointerComponent",
|
||||
brush: "BrushComponent",
|
||||
title: "TitleComponent",
|
||||
timeline: "TimelineComponent",
|
||||
markPoint: "MarkPointComponent",
|
||||
markLine: "MarkLineComponent",
|
||||
markArea: "MarkAreaComponent",
|
||||
legend: "LegendComponent",
|
||||
dataZoom: "DataZoomComponent",
|
||||
visualMap: "VisualMapComponent",
|
||||
thumbnail: "ThumbnailComponent",
|
||||
aria: "AriaComponent",
|
||||
dataset: "DatasetComponent",
|
||||
|
||||
// Dependencies
|
||||
xAxis: "GridComponent",
|
||||
yAxis: "GridComponent",
|
||||
angleAxis: "PolarComponent",
|
||||
radiusAxis: "PolarComponent",
|
||||
};
|
||||
|
||||
const CHARTS_MAP: Record<string, string> = {
|
||||
line: "LineChart",
|
||||
bar: "BarChart",
|
||||
pie: "PieChart",
|
||||
scatter: "ScatterChart",
|
||||
radar: "RadarChart",
|
||||
map: "MapChart",
|
||||
tree: "TreeChart",
|
||||
treemap: "TreemapChart",
|
||||
graph: "GraphChart",
|
||||
chord: "ChordChart",
|
||||
gauge: "GaugeChart",
|
||||
funnel: "FunnelChart",
|
||||
parallel: "ParallelChart",
|
||||
sankey: "SankeyChart",
|
||||
boxplot: "BoxplotChart",
|
||||
candlestick: "CandlestickChart",
|
||||
effectScatter: "EffectScatterChart",
|
||||
lines: "LinesChart",
|
||||
heatmap: "HeatmapChart",
|
||||
pictorialBar: "PictorialBarChart",
|
||||
themeRiver: "ThemeRiverChart",
|
||||
sunburst: "SunburstChart",
|
||||
custom: "CustomChart",
|
||||
};
|
||||
|
||||
const COMPONENTS_GL_MAP: Record<string, string> = {
|
||||
grid3D: "Grid3DComponent",
|
||||
geo3D: "Geo3DComponent",
|
||||
globe: "GlobeComponent",
|
||||
mapbox3D: "Mapbox3DComponent",
|
||||
maptalks3D: "Maptalks3DComponent",
|
||||
|
||||
// Dependencies
|
||||
xAxis3D: "Grid3DComponent",
|
||||
yAxis3D: "Grid3DComponent",
|
||||
zAxis3D: "Grid3DComponent",
|
||||
};
|
||||
|
||||
const CHARTS_GL_MAP: Record<string, string> = {
|
||||
bar3D: "Bar3DChart",
|
||||
line3D: "Line3DChart",
|
||||
scatter3D: "Scatter3DChart",
|
||||
lines3D: "Lines3DChart",
|
||||
polygons3D: "Polygons3DChart",
|
||||
surface: "SurfaceChart",
|
||||
map3D: "Map3DChart",
|
||||
|
||||
scatterGL: "ScatterGLChart",
|
||||
graphGL: "GraphGLChart",
|
||||
flowGL: "FlowGLChart",
|
||||
linesGL: "LinesGLChart",
|
||||
};
|
||||
|
||||
const FEATURES: string[] = [
|
||||
"UniversalTransition",
|
||||
"LabelLayout",
|
||||
"AxisBreak",
|
||||
// "LegacyGridContainLabel",
|
||||
"ScatterJitter",
|
||||
];
|
||||
const RENDERERS_MAP: Record<string, string> = {
|
||||
canvas: "CanvasRenderer",
|
||||
svg: "SVGRenderer",
|
||||
};
|
||||
|
||||
const EXTENSIONS_MAP: Record<string, string> = {
|
||||
bmap: "bmap/bmap",
|
||||
// PENDING: There seem no examples that use dataTool
|
||||
// dataTool: 'dataTool'
|
||||
};
|
||||
|
||||
// Component that will be injected automatically in preprocessor
|
||||
// These should be excluded util find they were used explicitly.
|
||||
const MARKERS: string[] = ["markLine", "markArea", "markPoint"];
|
||||
const INJECTED_COMPONENTS: string[] = [
|
||||
...MARKERS,
|
||||
"grid",
|
||||
"axisPointer",
|
||||
"aria", // TODO aria
|
||||
];
|
||||
|
||||
// Component that was dependent.
|
||||
const DEPENDENT_COMPONENTS: string[] = [
|
||||
"xAxis",
|
||||
"yAxis",
|
||||
"angleAxis",
|
||||
"radiusAxis",
|
||||
"xAxis3D",
|
||||
"yAxis3D",
|
||||
"zAxis3D",
|
||||
];
|
||||
|
||||
function createReverseMap(map: Record<string, string>): Record<string, string> {
|
||||
const reverseMap: Record<string, string> = {};
|
||||
Object.keys(map).forEach((key) => {
|
||||
// Exclude dependencies.
|
||||
if (DEPENDENT_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
}
|
||||
reverseMap[map[key]] = key;
|
||||
});
|
||||
|
||||
return reverseMap;
|
||||
}
|
||||
|
||||
const COMPONENTS_MAP_REVERSE = createReverseMap(COMPONENTS_MAP);
|
||||
const CHARTS_MAP_REVERSE = createReverseMap(CHARTS_MAP);
|
||||
const COMPONENTS_GL_MAP_REVERSE = createReverseMap(COMPONENTS_GL_MAP);
|
||||
const CHARTS_GL_MAP_REVERSE = createReverseMap(CHARTS_GL_MAP);
|
||||
|
||||
type DependencyList = string[];
|
||||
|
||||
type OptionLike = PlainObject & {
|
||||
options?: unknown;
|
||||
baseOption?: unknown;
|
||||
series?: unknown;
|
||||
dataset?: unknown;
|
||||
};
|
||||
|
||||
type SeriesOptionLike = PlainObject & {
|
||||
type?: unknown;
|
||||
coordinateSystem?: unknown;
|
||||
labelLayout?: unknown;
|
||||
universalTransition?: unknown;
|
||||
};
|
||||
|
||||
function isOptionLike(value: unknown): value is OptionLike {
|
||||
return isPlainObject(value);
|
||||
}
|
||||
|
||||
function isSeriesOptionLike(value: unknown): value is SeriesOptionLike {
|
||||
return isPlainObject(value);
|
||||
}
|
||||
|
||||
function toOptionLike(value: unknown): OptionLike | null {
|
||||
return isOptionLike(value) ? value : null;
|
||||
}
|
||||
|
||||
function toSeriesList(value: unknown): SeriesOptionLike[] {
|
||||
const list: SeriesOptionLike[] = [];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
if (isSeriesOptionLike(item)) {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
} else if (isSeriesOptionLike(value)) {
|
||||
list.push(value);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
function collectDeps(option: unknown): DependencyList {
|
||||
const deps: DependencyList = [];
|
||||
const optionObject = toOptionLike(option);
|
||||
if (!optionObject) {
|
||||
return deps;
|
||||
}
|
||||
|
||||
const nestedOptions = optionObject.options;
|
||||
if (Array.isArray(nestedOptions)) {
|
||||
// TODO getOption() doesn't have baseOption and options.
|
||||
nestedOptions.forEach((opt) => {
|
||||
deps.push(...collectDeps(opt));
|
||||
});
|
||||
}
|
||||
|
||||
if (optionObject.baseOption) {
|
||||
deps.push(...collectDeps(optionObject.baseOption));
|
||||
}
|
||||
|
||||
if (deps.length === 0) {
|
||||
Object.keys(optionObject).forEach((key) => {
|
||||
if (INJECTED_COMPONENTS.includes(key)) {
|
||||
return;
|
||||
}
|
||||
const value = optionObject[key];
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (COMPONENTS_MAP[key]) {
|
||||
deps.push(COMPONENTS_MAP[key]);
|
||||
}
|
||||
if (COMPONENTS_GL_MAP[key]) {
|
||||
deps.push(COMPONENTS_GL_MAP[key]);
|
||||
}
|
||||
if (EXTENSIONS_MAP[key]) {
|
||||
deps.push(key);
|
||||
}
|
||||
});
|
||||
|
||||
const seriesList = toSeriesList(optionObject.series);
|
||||
let hasScatterSeries = false;
|
||||
seriesList.forEach((seriesOpt) => {
|
||||
const type = typeof seriesOpt.type === "string" ? seriesOpt.type : "";
|
||||
if (type === "scatter") {
|
||||
hasScatterSeries = true;
|
||||
}
|
||||
if (CHARTS_MAP[type]) {
|
||||
deps.push(CHARTS_MAP[type]);
|
||||
}
|
||||
if (CHARTS_GL_MAP[type]) {
|
||||
deps.push(CHARTS_GL_MAP[type]);
|
||||
}
|
||||
if (type === "map") {
|
||||
deps.push(COMPONENTS_MAP.geo);
|
||||
}
|
||||
if (seriesOpt.coordinateSystem === "bmap") {
|
||||
deps.push("bmap");
|
||||
}
|
||||
MARKERS.forEach((markerType) => {
|
||||
if (isPlainObject(seriesOpt[markerType])) {
|
||||
deps.push(COMPONENTS_MAP[markerType]);
|
||||
}
|
||||
});
|
||||
if (seriesOpt.labelLayout) {
|
||||
deps.push("LabelLayout");
|
||||
}
|
||||
if (seriesOpt.universalTransition) {
|
||||
deps.push("UniversalTransition");
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(optionObject).forEach((key) => {
|
||||
if (!key.endsWith("Axis")) {
|
||||
return;
|
||||
}
|
||||
const value = optionObject[key];
|
||||
const axes = Array.isArray(value) ? value : [value];
|
||||
axes.forEach((axisOption) => {
|
||||
if (!isPlainObject(axisOption)) {
|
||||
return;
|
||||
}
|
||||
if (hasScatterSeries && Number(axisOption.jitter) > 0) {
|
||||
deps.push("ScatterJitter");
|
||||
}
|
||||
const breaks = axisOption.breaks;
|
||||
if (Array.isArray(breaks) && breaks.length > 0) {
|
||||
deps.push("AxisBreak");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const dataset = optionObject.dataset;
|
||||
if (Array.isArray(dataset)) {
|
||||
dataset.forEach((item) => {
|
||||
if (isPlainObject(item) && item.transform) {
|
||||
deps.push("TransformComponent");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(new Set(deps));
|
||||
}
|
||||
|
||||
function withDefaults(options: FormatterOptions): FormatterOptionsWithDefaults {
|
||||
return {
|
||||
semi: options.semi ?? false,
|
||||
quote: options.quote ?? "'",
|
||||
multiline: options.multiline ?? false,
|
||||
indent: options.indent ?? " ",
|
||||
maxLen: options.maxLen ?? 80,
|
||||
includeType: options.includeType,
|
||||
type: options.type,
|
||||
};
|
||||
}
|
||||
|
||||
function buildMinimalBundleCode(
|
||||
deps: string[],
|
||||
optionsInput: FormatterOptions,
|
||||
): string {
|
||||
const options = withDefaults(optionsInput);
|
||||
|
||||
const chartsImports: string[] = [];
|
||||
const componentsImports: string[] = [];
|
||||
const chartsGLImports: string[] = [];
|
||||
const componentsGLImports: string[] = [];
|
||||
const featuresImports: string[] = [];
|
||||
const renderersImports: string[] = [];
|
||||
const extensionImports: string[] = [];
|
||||
|
||||
deps.forEach((dep) => {
|
||||
if (dep.endsWith("Renderer")) {
|
||||
renderersImports.push(dep);
|
||||
} else if (CHARTS_MAP_REVERSE[dep]) {
|
||||
chartsImports.push(dep);
|
||||
if (options.includeType) {
|
||||
chartsImports.push(dep.replace(/Chart$/, "SeriesOption"));
|
||||
}
|
||||
} else if (COMPONENTS_MAP_REVERSE[dep]) {
|
||||
componentsImports.push(dep);
|
||||
if (options.includeType) {
|
||||
componentsImports.push(dep.replace(/Component$/, "ComponentOption"));
|
||||
}
|
||||
} else if (dep === "TransformComponent") {
|
||||
// TransformComponent don't have individual option type.
|
||||
// TODO will put in to an config if there are other similar components
|
||||
componentsImports.push(dep);
|
||||
} else if (CHARTS_GL_MAP_REVERSE[dep]) {
|
||||
chartsGLImports.push(dep);
|
||||
} else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
|
||||
componentsGLImports.push(dep);
|
||||
} else if (FEATURES.includes(dep)) {
|
||||
featuresImports.push(dep);
|
||||
} else if (EXTENSIONS_MAP[dep]) {
|
||||
extensionImports.push(dep);
|
||||
}
|
||||
});
|
||||
|
||||
const allImports = [
|
||||
...componentsImports,
|
||||
...chartsImports,
|
||||
...componentsGLImports,
|
||||
...chartsGLImports,
|
||||
...renderersImports,
|
||||
...featuresImports,
|
||||
];
|
||||
|
||||
const ECOptionTypeCode = typeItems(
|
||||
allImports.filter((a) => a.endsWith("Option")),
|
||||
options,
|
||||
);
|
||||
|
||||
const importSources: Array<[string[], string]> = [];
|
||||
if (chartsImports.length) {
|
||||
importSources.push([chartsImports, "echarts/charts"]);
|
||||
}
|
||||
if (componentsImports.length) {
|
||||
importSources.push([componentsImports, "echarts/components"]);
|
||||
}
|
||||
if (featuresImports.length) {
|
||||
importSources.push([featuresImports, "echarts/features"]);
|
||||
}
|
||||
if (renderersImports.length) {
|
||||
importSources.push([renderersImports, "echarts/renderers"]);
|
||||
}
|
||||
if (chartsGLImports.length) {
|
||||
importSources.push([chartsGLImports, "echarts-gl/charts"]);
|
||||
}
|
||||
if (componentsGLImports.length) {
|
||||
importSources.push([componentsGLImports, "echarts-gl/components"]);
|
||||
}
|
||||
const importStatements = importSources.map(([imports, mod]) =>
|
||||
importItems(
|
||||
imports.filter((a) => !a.endsWith("Option")),
|
||||
mod,
|
||||
options,
|
||||
),
|
||||
);
|
||||
|
||||
const semiStr = options.semi ? ";" : "";
|
||||
|
||||
getExtensionDeps(extensionImports, options.includeType).forEach((ext) => {
|
||||
importStatements.push(
|
||||
`import ${options.quote}${ext}${options.quote}${semiStr}`,
|
||||
);
|
||||
});
|
||||
|
||||
if (options.includeType) {
|
||||
importStatements.push(
|
||||
`import type { ComposeOption } from ${options.quote}echarts/core${options.quote}${semiStr}`,
|
||||
);
|
||||
const importTypeStatements = importSources
|
||||
.map(([imports, mod]) => {
|
||||
const typeImports = imports.filter((item) => item.endsWith("Option"));
|
||||
return typeImports.length > 0
|
||||
? importItems(typeImports, mod, { ...options, type: true })
|
||||
: "";
|
||||
})
|
||||
.filter((statement): statement is string => statement.length > 0);
|
||||
importStatements.push(...importTypeStatements);
|
||||
}
|
||||
|
||||
return `import { use } from ${options.quote}echarts/core${options.quote}${semiStr}
|
||||
${importStatements.join("\n")}
|
||||
|
||||
${useItems(
|
||||
allImports.filter((a) => !a.endsWith("Option")),
|
||||
options,
|
||||
)}
|
||||
${options.includeType ? `\n${ECOptionTypeCode}` : ""}
|
||||
`;
|
||||
}
|
||||
function getExtensionDeps(deps: string[], includeTypes?: boolean): string[] {
|
||||
return deps
|
||||
.filter((dep) => EXTENSIONS_MAP[dep])
|
||||
.map(
|
||||
(dep) =>
|
||||
`echarts/extension${includeTypes ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`,
|
||||
);
|
||||
}
|
||||
|
||||
/** import */
|
||||
function importItems(
|
||||
items: string[],
|
||||
module: string,
|
||||
options: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (multiline) {
|
||||
return importMultiLine(items, module, options);
|
||||
}
|
||||
|
||||
const singleLine = importSingleLine(items, module, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return importMultiLine(items, module, options);
|
||||
}
|
||||
|
||||
// import { foo, bar } from 'module'
|
||||
function importSingleLine(
|
||||
items: string[],
|
||||
module: string,
|
||||
{ type, semi, quote }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const typeStr = type ? "type " : "";
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{ ${items.join(
|
||||
", ",
|
||||
)} } from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
// import {
|
||||
// foo,
|
||||
// bar
|
||||
// } from 'module'
|
||||
function importMultiLine(
|
||||
items: string[],
|
||||
module: string,
|
||||
{ type, indent, semi, quote }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const typeStr = type ? "type " : "";
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `import ${typeStr}{
|
||||
${items.map((item) => `${indent}${item}`).join(",\n")}
|
||||
} from ${quote}${module}${quote}${semiStr}`;
|
||||
}
|
||||
|
||||
/** use */
|
||||
function useItems(
|
||||
items: string[],
|
||||
options: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (multiline) {
|
||||
return useMultiLine(items, options);
|
||||
}
|
||||
|
||||
const singleLine = useSingleLine(items, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return useMultiLine(items, options);
|
||||
}
|
||||
|
||||
// use([foo, bar])
|
||||
function useSingleLine(
|
||||
items: string[],
|
||||
{ semi }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `use([${items.join(`, `)}])${semiStr}`;
|
||||
}
|
||||
|
||||
// use([
|
||||
// foo,
|
||||
// bar
|
||||
// ])
|
||||
function useMultiLine(
|
||||
items: string[],
|
||||
{ indent, semi }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `use([
|
||||
${items.map((item) => `${indent}${item}`).join(`,\n`)}
|
||||
])${semiStr}`;
|
||||
}
|
||||
|
||||
/** type */
|
||||
function typeItems(
|
||||
items: string[],
|
||||
options: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const { multiline, maxLen } = options;
|
||||
|
||||
if (items.length === 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (multiline) {
|
||||
return typeMultiLine(items, options);
|
||||
}
|
||||
|
||||
const singleLine = typeSingleLine(items, options);
|
||||
if (singleLine.length <= maxLen) {
|
||||
return singleLine;
|
||||
}
|
||||
|
||||
return typeMultiLine(items, options);
|
||||
}
|
||||
|
||||
// type EChartsOption = ComposeOption<FooOption | BarOption>
|
||||
function typeSingleLine(
|
||||
items: string[],
|
||||
{ semi }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `type EChartsOption = ComposeOption<${items.join(` | `)}>${semiStr}`;
|
||||
}
|
||||
|
||||
// type EChartsOption = ComposeOption<
|
||||
// | FooOption
|
||||
// | BarOption
|
||||
// >
|
||||
function typeMultiLine(
|
||||
items: string[],
|
||||
{ indent, semi }: FormatterOptionsWithDefaults,
|
||||
): string {
|
||||
const semiStr = semi ? ";" : "";
|
||||
|
||||
return `type EChartsOption = ComposeOption<
|
||||
${items.map((item) => `${indent}| ${item}`).join("\n")}
|
||||
>${semiStr}`;
|
||||
}
|
||||
|
||||
export interface PublicCodegenOptions extends FormatterOptions {
|
||||
renderer?: keyof typeof RENDERERS_MAP;
|
||||
}
|
||||
|
||||
export function getImportsFromOption(
|
||||
option: unknown,
|
||||
{ renderer = "canvas", ...options }: PublicCodegenOptions = {},
|
||||
): string {
|
||||
return buildMinimalBundleCode(
|
||||
[...collectDeps(option), RENDERERS_MAP[renderer]],
|
||||
options,
|
||||
);
|
||||
}
|
||||
59
demo/utils/dom.ts
Normal file
59
demo/utils/dom.ts
Normal file
@ -0,0 +1,59 @@
|
||||
export const isClient = typeof window !== "undefined";
|
||||
|
||||
let cachedScrollbarWidth: number | null = null;
|
||||
|
||||
export function getScrollLockTarget(): HTMLElement | null {
|
||||
return isClient ? document.body : null;
|
||||
}
|
||||
|
||||
export function setHash(hash: string): void {
|
||||
if (!isClient) {
|
||||
return;
|
||||
}
|
||||
const value = hash ? (hash.startsWith("#") ? hash : `#${hash}`) : "";
|
||||
if (window.location.hash === value) {
|
||||
return;
|
||||
}
|
||||
const { pathname, search } = window.location;
|
||||
window.history.replaceState(null, "", `${pathname}${search}${value}`);
|
||||
}
|
||||
|
||||
export function getScrollbarWidth(): number {
|
||||
if (!isClient) {
|
||||
return 0;
|
||||
}
|
||||
if (cachedScrollbarWidth !== null) {
|
||||
return cachedScrollbarWidth;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
const direct = Math.abs(window.innerWidth - root.clientWidth);
|
||||
if (direct > 0) {
|
||||
cachedScrollbarWidth = direct;
|
||||
return cachedScrollbarWidth;
|
||||
}
|
||||
|
||||
const probe = document.createElement("div");
|
||||
Object.assign(probe.style, {
|
||||
position: "absolute",
|
||||
top: "-9999px",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
overflow: "scroll",
|
||||
visibility: "hidden",
|
||||
pointerEvents: "none",
|
||||
});
|
||||
|
||||
const rootScrollbarWidth =
|
||||
getComputedStyle(root).getPropertyValue("scrollbar-width");
|
||||
if (rootScrollbarWidth) {
|
||||
probe.style.setProperty("scrollbar-width", rootScrollbarWidth);
|
||||
}
|
||||
|
||||
root.appendChild(probe);
|
||||
const width = probe.offsetWidth - probe.clientWidth;
|
||||
root.removeChild(probe);
|
||||
|
||||
cachedScrollbarWidth = width;
|
||||
return cachedScrollbarWidth;
|
||||
}
|
||||
16
demo/utils/geo.ts
Normal file
16
demo/utils/geo.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import type { registerMap } from "echarts/core";
|
||||
|
||||
type GeoJSONInput = Parameters<typeof registerMap>[1];
|
||||
|
||||
type FeatureCollectionLike = { type?: unknown };
|
||||
|
||||
export function isGeoJSONSource(value: unknown): value is GeoJSONInput {
|
||||
if (typeof value === "string") {
|
||||
return true;
|
||||
}
|
||||
if (value && typeof value === "object" && "type" in value) {
|
||||
const type = (value as FeatureCollectionLike).type;
|
||||
return type === "FeatureCollection";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Reference in New Issue
Block a user