multi-measure-column-chart.ts 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { hasSubset } from '../advisor/utils';
  2. import type { ChartKnowledge, CustomChart, GetChartConfigProps, Specification } from '../types';
  3. import { findNominalField, findOrdinalField } from './util';
  4. const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConfigProps['dataProps']) => {
  5. try {
  6. const field4Y = dataProps?.filter(field => hasSubset(field.levelOfMeasurements, ['Interval']));
  7. const nominalField = findNominalField(dataProps);
  8. const ordinalField = findOrdinalField(dataProps);
  9. const field4X = nominalField ?? ordinalField;
  10. if (!field4X || !field4Y) return null;
  11. const spec: Specification = {
  12. type: 'view',
  13. data,
  14. children: [],
  15. };
  16. field4Y?.forEach(field => {
  17. const singleLine: Specification = {
  18. type: 'interval',
  19. encode: {
  20. x: field4X.name,
  21. y: field.name,
  22. color: () => field.name,
  23. series: () => field.name,
  24. },
  25. };
  26. spec.children.push(singleLine);
  27. });
  28. return spec;
  29. } catch (err) {
  30. console.log(err);
  31. return null;
  32. }
  33. };
  34. const ckb: ChartKnowledge = {
  35. id: 'multi_measure_column_chart',
  36. name: 'multi_measure_column_chart',
  37. alias: ['multi_measure_column_chart'],
  38. family: ['ColumnCharts'],
  39. def: 'multi_measure_column_chart uses lines with segments to show changes in data in a ordinal dimension',
  40. purpose: ['Comparison', 'Distribution'],
  41. coord: ['Cartesian2D'],
  42. category: ['Statistic'],
  43. shape: ['Lines'],
  44. dataPres: [
  45. { minQty: 1, maxQty: '*', fieldConditions: ['Interval'] },
  46. { minQty: 1, maxQty: 1, fieldConditions: ['Nominal'] },
  47. ],
  48. channel: ['Color', 'Direction', 'Position'],
  49. recRate: 'Recommended',
  50. toSpec: getChartSpec,
  51. };
  52. /* 订制一个图表需要的所有参数 */
  53. export const multi_measure_column_chart: CustomChart = {
  54. /* 图表唯一 Id */
  55. chartType: 'multi_measure_column_chart',
  56. /* 图表知识 */
  57. chartKnowledge: ckb as ChartKnowledge,
  58. /** 图表中文名 */
  59. chineseName: '折线图',
  60. };
  61. export default multi_measure_column_chart;