import { GREY_CAT_VALUE, ObservableChart, Utils } from 'rxg2';
import * as op from "rxjs/operators";

const dataSource$: Observable<IRow[]> = from(fetch("/cars.json").then((res) => res.json())).pipe(
    op.startWith([])
);
// 声明变量
const xVar$ = createVariable(dataSource$, "Miles_per_Gallon");
const yVar$ = createVariable(dataSource$, "Horsepower");
const colorVar$ = createVariable(dataSource$, 'Origin')

// 初始化图表
const rxChart = new ObservableChart();

const selection$ = rxChart.useSelection({
    target: 'element',
    type: 'single',
    on: 'mouseover',
});
// 定义图表交互事件产生的predicates,vega中的概念，类似对selection的特征描述，由一堆筛选器构成。
const predicates$: Observable<IFilter[]> = selection$.pipe(
    op.map((rows) => [Utils.createFilter('Cylinders', 'in', rows.filter((row) => row !== null) as IRow[])])
);
// 定义颜色为一个随交互行为变化的变量,
// rx-g2允许你对任何映射到视觉通道上的字段可以升级为一个更为动态变量，而不是写死于一个数据集中已有的常量字段
const color$ = combineLatest([predicates$, colorVar$, dataSource$]).pipe(
    op.map(([predicates, origin, dataSource]) => {
        return dataSource.map((row, rIndex) => {
            if (Utils.rowFilteredOut(row, predicates)) return GREY_CAT_VALUE;
            return origin[rIndex];
        });
    })
);
// 配置图标
rxChart.geom('point').position([xVar$, yVar$])
    .color(color$);
Â
rxChart.data(dataSource$);

rxChart.render();

fetch('/cars.json').then(res => res.json()).then(res => {

    chart.point().position('Miles_per_Gallon*Horsepower')
    .color('Origin')

    chart.data(dataSource)

    chart.render();
})