Adding Chart component (#24357)

* added doughnut chart component

* Changing chart to doughnutChart

* reverting to genreic chart component

* adding more chart supoort

* fix minor errors

* resolve some PR comments

* native chartjs, keyboard navigation and chart options

* fix build errors

* fix chart.js/auto error

* resolve PR comments

* modify chartdataset API

* Refactoring (#24327)

* working - displaying chart data with convert

* working - introduced typed properties

* working, added BarChartConfiguration to type param

* removed ChartProperties type param

* Adding doughnut support

* Correcting number vs. point issue

* including the right changes this time

* commenting out no-longer-used labels prop

* remove hardcoded canvasID, enabled Scatterplot config

* Moved graph testing to sample extension

* Reorganizing types; adding test back to assessment dialog

* Adding example for bubble chart

* Polar area working

* cleanup

* adding draw when options isn't set

* Moving chart example configs to other file

* some cleanup

* added some docstrings

* add multiple datasets to test scatter plot

* update scatter plot example in sample

* Adding height/width support

* swapping to `as` cast

* title working

* Settling chart title and legend display

* Adding comments

* updating data working

* Updating samples

* Typo in comment

* Reverting changes made for development

* Elaborating on color in docstrings

* Separating Data and Options in component payloads

* Removing chartId as an exposed property

* Changing chartType property to TChartType

* Fleshing out types file comments

* fixing scoping of chart component properties; renaming chart canvas ID prop

* correct internal chart options typing

* removing commented-out code

* removing unused ChartClickEvent type until data selection eventing is implemented

* renaming function

* deleted commented-out code

* Adding options setters that went missing after splitting Config to Data + Options

* adding type predicates for data conversion

* Adding back type setting (dropped when chart type conversion moved)

* Narrowing type for 'type'

* Fixing typos in docstring

---------

Co-authored-by: Deepak Saini <deepaksaini@microsoft.com>
Co-authored-by: Charles Gagnon <chgagnon@microsoft.com>
Co-authored-by: Aasim Khan <aaskhan@microsoft.com>
Co-authored-by: Deepak Saini <deepak.saini1996@gmail.com>
This commit is contained in:
Benjin Dubishar
2023-09-13 20:11:09 -07:00
committed by GitHub
parent f7ac504a6c
commit d9b5d71148
21 changed files with 1419 additions and 8 deletions

View File

@@ -290,6 +290,13 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
return builder;
}
chart<TChartType extends azdata.ChartType, TData extends azdata.ChartData<TChartType>, TOptions extends azdata.ChartOptions<TChartType>>(): azdata.ComponentBuilder<azdata.ChartComponent<TChartType, TData, TOptions>, azdata.ChartComponentProperties<TChartType, TData, TOptions>> {
let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<azdata.ChartComponent<TChartType, TData, TOptions>, azdata.ChartComponentProperties<TChartType, TData, TOptions>> = this.getComponentBuilder(new ChartComponentWrapper<TChartType, TData, TOptions>(this._proxy, this._handle, id, this.logService), id);
this._componentBuilders.set(id, builder);
return builder;
}
getComponentBuilder<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T, TPropertyBag> {
let componentBuilder: ComponentBuilderImpl<T, TPropertyBag> = new ComponentBuilderImpl<T, TPropertyBag>(component);
this._componentBuilders.set(id, componentBuilder);
@@ -2273,6 +2280,44 @@ class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.
}
}
class ChartComponentWrapper<TChartType extends azdata.ChartType, TData extends azdata.ChartData<TChartType>, TOptions extends azdata.ChartOptions<TChartType>> extends ComponentWrapper implements azdata.ChartComponent<TChartType, TData, TOptions> {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string, logService: ILogService) {
super(proxy, handle, ModelComponentTypes.Chart, id, logService);
this.properties = {};
this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
}
public set chartType(v: TChartType) {
this.setProperty('chartType', v);
}
public get chartType(): TChartType {
return this.properties['chartType'];
}
public set data(v: TData) {
this.setProperty('data', v);
}
public get data(): TData {
return this.properties['data'];
}
public set options(v: TOptions) {
this.setProperty('options', v);
}
public get options(): TOptions {
return this.properties['options'];
}
public get onDidClick(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
return emitter && emitter.event;
}
}
class ModelViewImpl extends Disposable implements azdata.ModelView {
public onClosedEmitter = this._register(new Emitter<any>());