feat: scale property of color enc

examples/pie_color.json

@@ -0,0 +1,25 @@
+{
+ "basis": {
+ "type": "chart"
+ },
+ "data": {
+ "type": "json-array",
+ "values": [
+ {"category": 1, "value": 4},
+ {"category": 2, "value": 6},
+ {"category": 3, "value": 10},
+ {"category": 4, "value": 3},
+ {"category": 5, "value": 7},
+ {"category": 6, "value": 8}
+ ]
+ },
+ "layer": [
+ {
+ "mark": "arc",
+ "encoding": {
+ "theta": {"field": "value", "type": "quantitative"},
+ "color": {"field": "category", "type": "nominal", "scale": { "range": ["#5c0011", "#874d00", "#ffec3d", "#7cb305", "#08979c", "#003a8c"]}}
+ }
+ }
+ ]
+}

src/adaptor/g2plot/toConfig.ts

@@ -172,6 +172,10 @@ export function toG2PlotConfg(spec: ChartAntVSpec) {
  } else {
  configs.config.colorField = layer.encoding[key]?.field;
  }
+ if (layer.encoding[key]?.scale && layer.encoding[key]?.scale.range) {
+ // define color
+ configs.config.color = layer.encoding[key]?.scale.range;
+ }
  }
  });
  }

src/schema/encoding/color.ts

@@ -1,8 +1,10 @@
 import { EType } from './type';
 import { Aggregate } from './aggregate';
+import { Scale } from './scale';
 
 export interface Color {
  field: string;
  type: EType;
  aggregate?: Aggregate;
+ scale?: Scale;
 }

src/schema/encoding/scale.ts

@@ -0,0 +1,13 @@
+// TODO: detailed type denifition. currently to support color hex string
+export type Scale = {
+ // range after data mapping
+ // such as ['apple', 'banana'] --map to--> ['red', 'yellow'](range)
+ range: (string | number)[];
+ rangeMin: string | number;
+ rangeMax: string | number;
+ // data domain used to data mapping
+ // such as [0, 100] --domain:[10, 90]--> [10, 90](filter data less than 10)
+ domain: number[];
+ domainMin: number;
+ domaminMax: number;
+};