mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-05 09:35:39 -05:00
Add separate dialog to notebook charts for specifying chart options. (#9454)
This commit is contained in:
Cory Rivera
@@ -3,6 +3,15 @@
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.vs .codicon.settings {
|
||||
background-image: url('settings.svg');
|
||||
}
|
||||
|
||||
.vs-dark .codicon.settings,
|
||||
.hc-black .codicon.settings {
|
||||
background-image: url('settings_inverse.svg');
|
||||
}
|
||||
|
||||
.vs .codicon.backup {
|
||||
background: url("backup.svg") center center no-repeat;
|
||||
}
|
||||
|
||||
3
src/sql/media/icons/settings.svg
Normal file
3
src/sql/media/icons/settings.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.9297 7.71875V7.8594C13.9297 7.90625 13.9323 7.9531 13.9375 8V8.1406C13.9375 8.1875 13.9349 8.2344 13.9297 8.28125L15.9531 9.53905L14.7109 12.5312L12.3906 12C12.2656 12.1354 12.1354 12.2656 12 12.3906L12.5312 14.7109L9.53905 15.9531L8.28125 13.9297H8.1406C8.09375 13.9297 8.0469 13.9323 8 13.9375H7.8594C7.8125 13.9375 7.7656 13.9349 7.71875 13.9297L6.46095 15.9531L3.46875 14.7109L4 12.3906C3.86458 12.2656 3.73438 12.1354 3.60938 12L1.28906 12.5312L0.046875 9.53905L2.07031 8.28125V8.1406C2.07031 8.09375 2.06771 8.0469 2.0625 8V7.8594C2.0625 7.8125 2.06511 7.7656 2.07031 7.71875L0.046875 6.46095L1.28906 3.46875L3.60938 4C3.73438 3.86458 3.86458 3.73438 4 3.60938L3.46875 1.28906L6.46095 0.046875L7.71875 2.07031H7.8594C7.90625 2.07031 7.9531 2.06771 8 2.0625H8.1406C8.1875 2.0625 8.2344 2.06511 8.28125 2.07031L9.53905 0.046875L12.5312 1.28906L12 3.60938C12.1354 3.73438 12.2656 3.86458 12.3906 4L14.7109 3.46875L15.9531 6.46095L13.9297 7.71875ZM13.0156 8.7344C13.0261 8.6094 13.0364 8.487 13.0469 8.3672C13.0573 8.2474 13.0625 8.1224 13.0625 7.9922C13.0625 7.8724 13.0573 7.75 13.0469 7.625C13.0364 7.5 13.0261 7.3776 13.0156 7.2578L14.8594 6.1094L14.1875 4.48438L12.0703 4.97656C11.9089 4.77865 11.7448 4.59635 11.5781 4.42969C11.4115 4.26302 11.2265 4.09635 11.0234 3.92969L11.5156 1.8125L9.8906 1.14062L8.7344 2.98438C8.6146 2.97396 8.4922 2.96354 8.3672 2.95312C8.2422 2.94271 8.1198 2.9375 8 2.9375C7.875 2.9375 7.7526 2.94271 7.6328 2.95312C7.513 2.96354 7.388 2.97396 7.2578 2.98438L6.1094 1.14062L4.48438 1.8125L4.97656 3.92969C4.77865 4.09114 4.59635 4.25521 4.42969 4.42188C4.26302 4.58854 4.09635 4.77344 3.92969 4.97656L1.8125 4.48438L1.14062 6.1094L2.98438 7.2656C2.97396 7.3906 2.96354 7.513 2.95312 7.6328C2.94271 7.7526 2.9375 7.8776 2.9375 8.0078C2.9375 8.1276 2.94271 8.25 2.95312 8.375C2.96354 8.5 2.97396 8.6224 2.98438 8.7422L1.14062 9.8906L1.8125 11.5156L3.92969 11.0234C4.09114 11.2213 4.25521 11.4037 4.42188 11.5703C4.58854 11.737 4.77344 11.9037 4.97656 12.0703L4.48438 14.1875L6.1094 14.8594L7.2656 13.0156C7.3854 13.0261 7.5078 13.0364 7.6328 13.0469C7.7578 13.0573 7.8802 13.0625 8 13.0625C8.125 13.0625 8.2474 13.0573 8.3672 13.0469C8.487 13.0364 8.612 13.0261 8.7422 13.0156L9.8906 14.8594L11.5156 14.1875L11.0234 12.0703C11.2213 11.9089 11.4037 11.7448 11.5703 11.5781C11.737 11.4115 11.9037 11.2265 12.0703 11.0234L14.1875 11.5156L14.8594 9.8906L13.0156 8.7344ZM8 5.0625C8.40625 5.0625 8.78645 5.138 9.1406 5.28905C9.4948 5.4401 9.8073 5.65105 10.0781 5.9219C10.349 6.1927 10.5573 6.5026 10.7031 6.85155C10.849 7.2005 10.9271 7.58335 10.9375 8C10.9375 8.40625 10.862 8.78645 10.7109 9.1406C10.5599 9.4948 10.349 9.8073 10.0781 10.0781C9.8073 10.349 9.4974 10.5573 9.14845 10.7031C8.7995 10.849 8.41665 10.9271 8 10.9375C7.59375 10.9375 7.21355 10.862 6.8594 10.7109C6.5052 10.5599 6.1927 10.349 5.9219 10.0781C5.65105 9.8073 5.4427 9.4974 5.2969 9.14845C5.15105 8.7995 5.0729 8.41665 5.0625 8C5.0625 7.59375 5.138 7.21355 5.28905 6.8594C5.4401 6.5052 5.65105 6.1927 5.9219 5.9219C6.1927 5.65105 6.5026 5.4427 6.85155 5.2969C7.2005 5.15105 7.58335 5.0729 8 5.0625ZM8 10.0625C8.28645 10.0625 8.5547 10.0104 8.8047 9.90625C9.0547 9.8021 9.27345 9.65365 9.46095 9.46095C9.64845 9.26825 9.79425 9.0495 9.89845 8.8047C10.0026 8.5599 10.0573 8.29165 10.0625 8C10.0625 7.71355 10.0104 7.4453 9.90625 7.1953C9.8021 6.9453 9.65365 6.72655 9.46095 6.53905C9.26825 6.35155 9.0495 6.20575 8.8047 6.10155C8.5599 5.9974 8.29165 5.9427 8 5.9375C7.71355 5.9375 7.4453 5.9896 7.1953 6.09375C6.9453 6.1979 6.72655 6.34635 6.53905 6.53905C6.35155 6.73175 6.20575 6.9505 6.10155 7.1953C5.9974 7.4401 5.9427 7.70835 5.9375 8C5.9375 8.28645 5.9896 8.5547 6.09375 8.8047C6.1979 9.0547 6.34635 9.27345 6.53905 9.46095C6.73175 9.64845 6.9505 9.79425 7.1953 9.89845C7.4401 10.0026 7.70835 10.0573 8 10.0625Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
3
src/sql/media/icons/settings_inverse.svg
Normal file
3
src/sql/media/icons/settings_inverse.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.9297 7.71875V7.8594C13.9297 7.90625 13.9323 7.9531 13.9375 8V8.1406C13.9375 8.1875 13.9349 8.2344 13.9297 8.28125L15.9531 9.53905L14.7109 12.5312L12.3906 12C12.2656 12.1354 12.1354 12.2656 12 12.3906L12.5312 14.7109L9.53905 15.9531L8.28125 13.9297H8.1406C8.09375 13.9297 8.0469 13.9323 8 13.9375H7.8594C7.8125 13.9375 7.7656 13.9349 7.71875 13.9297L6.46095 15.9531L3.46875 14.7109L4 12.3906C3.86458 12.2656 3.73438 12.1354 3.60938 12L1.28906 12.5312L0.046875 9.53905L2.07031 8.28125V8.1406C2.07031 8.09375 2.06771 8.0469 2.0625 8V7.8594C2.0625 7.8125 2.06511 7.7656 2.07031 7.71875L0.046875 6.46095L1.28906 3.46875L3.60938 4C3.73438 3.86458 3.86458 3.73438 4 3.60938L3.46875 1.28906L6.46095 0.046875L7.71875 2.07031H7.8594C7.90625 2.07031 7.9531 2.06771 8 2.0625H8.1406C8.1875 2.0625 8.2344 2.06511 8.28125 2.07031L9.53905 0.046875L12.5312 1.28906L12 3.60938C12.1354 3.73438 12.2656 3.86458 12.3906 4L14.7109 3.46875L15.9531 6.46095L13.9297 7.71875ZM13.0156 8.7344C13.0261 8.6094 13.0364 8.487 13.0469 8.3672C13.0573 8.2474 13.0625 8.1224 13.0625 7.9922C13.0625 7.8724 13.0573 7.75 13.0469 7.625C13.0364 7.5 13.0261 7.3776 13.0156 7.2578L14.8594 6.1094L14.1875 4.48438L12.0703 4.97656C11.9089 4.77865 11.7448 4.59635 11.5781 4.42969C11.4115 4.26302 11.2265 4.09635 11.0234 3.92969L11.5156 1.8125L9.8906 1.14062L8.7344 2.98438C8.6146 2.97396 8.4922 2.96354 8.3672 2.95312C8.2422 2.94271 8.1198 2.9375 8 2.9375C7.875 2.9375 7.7526 2.94271 7.6328 2.95312C7.513 2.96354 7.388 2.97396 7.2578 2.98438L6.1094 1.14062L4.48438 1.8125L4.97656 3.92969C4.77865 4.09114 4.59635 4.25521 4.42969 4.42188C4.26302 4.58854 4.09635 4.77344 3.92969 4.97656L1.8125 4.48438L1.14062 6.1094L2.98438 7.2656C2.97396 7.3906 2.96354 7.513 2.95312 7.6328C2.94271 7.7526 2.9375 7.8776 2.9375 8.0078C2.9375 8.1276 2.94271 8.25 2.95312 8.375C2.96354 8.5 2.97396 8.6224 2.98438 8.7422L1.14062 9.8906L1.8125 11.5156L3.92969 11.0234C4.09114 11.2213 4.25521 11.4037 4.42188 11.5703C4.58854 11.737 4.77344 11.9037 4.97656 12.0703L4.48438 14.1875L6.1094 14.8594L7.2656 13.0156C7.3854 13.0261 7.5078 13.0364 7.6328 13.0469C7.7578 13.0573 7.8802 13.0625 8 13.0625C8.125 13.0625 8.2474 13.0573 8.3672 13.0469C8.487 13.0364 8.612 13.0261 8.7422 13.0156L9.8906 14.8594L11.5156 14.1875L11.0234 12.0703C11.2213 11.9089 11.4037 11.7448 11.5703 11.5781C11.737 11.4115 11.9037 11.2265 12.0703 11.0234L14.1875 11.5156L14.8594 9.8906L13.0156 8.7344ZM8 5.0625C8.40625 5.0625 8.78645 5.138 9.1406 5.28905C9.4948 5.4401 9.8073 5.65105 10.0781 5.9219C10.349 6.1927 10.5573 6.5026 10.7031 6.85155C10.849 7.2005 10.9271 7.58335 10.9375 8C10.9375 8.40625 10.862 8.78645 10.7109 9.1406C10.5599 9.4948 10.349 9.8073 10.0781 10.0781C9.8073 10.349 9.4974 10.5573 9.14845 10.7031C8.7995 10.849 8.41665 10.9271 8 10.9375C7.59375 10.9375 7.21355 10.862 6.8594 10.7109C6.5052 10.5599 6.1927 10.349 5.9219 10.0781C5.65105 9.8073 5.4427 9.4974 5.2969 9.14845C5.15105 8.7995 5.0729 8.41665 5.0625 8C5.0625 7.59375 5.138 7.21355 5.28905 6.8594C5.4401 6.5052 5.65105 6.1927 5.9219 5.9219C6.1927 5.65105 6.5026 5.4427 6.85155 5.2969C7.2005 5.15105 7.58335 5.0729 8 5.0625ZM8 10.0625C8.28645 10.0625 8.5547 10.0104 8.8047 9.90625C9.0547 9.8021 9.27345 9.65365 9.46095 9.46095C9.64845 9.26825 9.79425 9.0495 9.89845 8.8047C10.0026 8.5599 10.0573 8.29165 10.0625 8C10.0625 7.71355 10.0104 7.4453 9.90625 7.1953C9.8021 6.9453 9.65365 6.72655 9.46095 6.53905C9.26825 6.35155 9.0495 6.20575 8.8047 6.10155C8.5599 5.9974 8.29165 5.9427 8 5.9375C7.71355 5.9375 7.4453 5.9896 7.1953 6.09375C6.9453 6.1979 6.72655 6.34635 6.53905 6.53905C6.35155 6.73175 6.20575 6.9505 6.10155 7.1953C5.9974 7.4401 5.9427 7.70835 5.9375 8C5.9375 8.28645 5.9896 8.5547 6.09375 8.8047C6.1979 9.0547 6.34635 9.27345 6.53905 9.46095C6.73175 9.64845 6.9505 9.79425 7.1953 9.89845C7.4401 10.0026 7.70835 10.0573 8 10.0625Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -339,7 +339,7 @@ export abstract class Modal extends Disposable implements IThemable {
|
||||
// Try to find focusable element in dialog pane rather than overall container. _modalBodySection contains items in the pane for a wizard.
|
||||
// This ensures that we are setting the focus on a useful element in the form when possible.
|
||||
const focusableElements = this._modalBodySection ?
|
||||
this._modalBodySection.querySelectorAll('input') :
|
||||
this._modalBodySection.querySelectorAll(tabbableElementsQuerySelector) :
|
||||
this._bodyContainer.querySelectorAll(tabbableElementsQuerySelector);
|
||||
|
||||
this._focusedElementBeforeOpen = <HTMLElement>document.activeElement;
|
||||
|
||||
@@ -23,6 +23,8 @@ import { assign } from 'vs/base/common/objects';
|
||||
import { IUntitledTextEditorService } from 'vs/workbench/services/untitled/common/untitledTextEditorService';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { UntitledTextEditorInput } from 'vs/workbench/services/untitled/common/untitledTextEditorInput';
|
||||
import { ChartView } from 'sql/workbench/contrib/charts/browser/chartView';
|
||||
import { ConfigureChartDialog } from 'sql/workbench/contrib/charts/browser/configureChartDialog';
|
||||
|
||||
export interface IChartActionContext {
|
||||
options: IInsightOptions;
|
||||
@@ -106,6 +108,28 @@ export class CreateInsightAction extends Action {
|
||||
}
|
||||
}
|
||||
|
||||
export class ConfigureChartAction extends Action {
|
||||
public static ID = 'chartview.configureChart';
|
||||
public static LABEL = localize('configureChartLabel', "Configure Chart");
|
||||
public static ICON = 'settings';
|
||||
|
||||
private dialog: ConfigureChartDialog;
|
||||
|
||||
constructor(private _chart: ChartView,
|
||||
@IInstantiationService private readonly instantiationService: IInstantiationService) {
|
||||
super(ConfigureChartAction.ID, ConfigureChartAction.LABEL, ConfigureChartAction.ICON);
|
||||
}
|
||||
|
||||
public run(context: IChartActionContext): Promise<boolean> {
|
||||
if (!this.dialog) {
|
||||
this.dialog = this.instantiationService.createInstance(ConfigureChartDialog, ConfigureChartAction.LABEL, ConfigureChartAction.ID, this._chart);
|
||||
this.dialog.render();
|
||||
}
|
||||
this.dialog.open();
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
}
|
||||
|
||||
export class CopyAction extends Action {
|
||||
public static ID = 'chartview.copy';
|
||||
public static LABEL = localize('copyChartLabel', "Copy as image");
|
||||
|
||||
@@ -16,7 +16,7 @@ export class ChartTab implements IPanelTab {
|
||||
public readonly view: ChartView;
|
||||
|
||||
constructor(@IInstantiationService instantiationService: IInstantiationService) {
|
||||
this.view = instantiationService.createInstance(ChartView);
|
||||
this.view = instantiationService.createInstance(ChartView, true);
|
||||
}
|
||||
|
||||
public set queryRunner(runner: QueryRunner) {
|
||||
|
||||
@@ -20,8 +20,8 @@ import { attachSelectBoxStyler, attachInputBoxStyler } from 'vs/platform/theme/c
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { isUndefinedOrNull } from 'vs/base/common/types';
|
||||
import { CreateInsightAction, CopyAction, SaveImageAction, IChartActionContext } from 'sql/workbench/contrib/charts/browser/actions';
|
||||
import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
|
||||
import { CreateInsightAction, CopyAction, SaveImageAction, IChartActionContext, ConfigureChartAction } from 'sql/workbench/contrib/charts/browser/actions';
|
||||
import { Taskbar, ITaskbarContent } from 'sql/base/browser/ui/taskbar/taskbar';
|
||||
import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
|
||||
import { IInsightOptions, ChartType } from 'sql/workbench/contrib/charts/common/interfaces';
|
||||
import { ChartState } from 'sql/workbench/common/editor/query/chartState';
|
||||
@@ -57,6 +57,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
private _createInsightAction: CreateInsightAction;
|
||||
private _copyAction: CopyAction;
|
||||
private _saveAction: SaveImageAction;
|
||||
private _configureChartAction: ConfigureChartAction;
|
||||
|
||||
private _state: ChartState;
|
||||
|
||||
@@ -68,7 +69,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
/** parent container */
|
||||
private container: HTMLElement;
|
||||
/** container for the options controls */
|
||||
private optionsControl: HTMLElement;
|
||||
public readonly optionsControl: HTMLElement;
|
||||
/** container for type specific controls */
|
||||
private typeControls: HTMLElement;
|
||||
/** container for the insight */
|
||||
@@ -82,6 +83,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
private optionMap: { [x: string]: { element: HTMLElement; set: (val) => void } } = {};
|
||||
|
||||
constructor(
|
||||
private readonly _renderOptionsInline: boolean,
|
||||
@IContextViewService private _contextViewService: IContextViewService,
|
||||
@IThemeService private _themeService: IThemeService,
|
||||
@IInstantiationService private _instantiationService: IInstantiationService,
|
||||
@@ -90,6 +92,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
super();
|
||||
this.taskbarContainer = DOM.$('div.taskbar-container');
|
||||
this.taskbar = new Taskbar(this.taskbarContainer);
|
||||
|
||||
this.optionsControl = DOM.$('div.options-container');
|
||||
const generalControls = DOM.$('div.general-controls');
|
||||
this.optionsControl.appendChild(generalControls);
|
||||
@@ -100,7 +103,12 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
this._copyAction = this._instantiationService.createInstance(CopyAction);
|
||||
this._saveAction = this._instantiationService.createInstance(SaveImageAction);
|
||||
|
||||
this.taskbar.setContent([{ action: this._createInsightAction }]);
|
||||
if (this._renderOptionsInline) {
|
||||
this.taskbar.setContent([{ action: this._createInsightAction }]);
|
||||
} else {
|
||||
this._configureChartAction = this._instantiationService.createInstance(ConfigureChartAction, this);
|
||||
this.taskbar.setContent([{ action: this._createInsightAction }, { action: this._configureChartAction }]);
|
||||
}
|
||||
|
||||
const self = this;
|
||||
this.options = new Proxy(this.options, {
|
||||
@@ -165,7 +173,9 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
this.container.appendChild(this.taskbarContainer);
|
||||
this.container.appendChild(this.chartingContainer);
|
||||
this.chartingContainer.appendChild(this.insightContainer);
|
||||
this.chartingContainer.appendChild(this.optionsControl);
|
||||
if (this._renderOptionsInline) {
|
||||
this.chartingContainer.appendChild(this.optionsControl);
|
||||
}
|
||||
this.insight = new Insight(this.insightContainer, this.options, this._instantiationService);
|
||||
}
|
||||
|
||||
@@ -275,16 +285,21 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
}
|
||||
|
||||
private updateActionbar() {
|
||||
let actions: ITaskbarContent[];
|
||||
if (this.insight && this.insight.isCopyable) {
|
||||
this.taskbar.context = { insight: this.insight.insight, options: this.options };
|
||||
this.taskbar.setContent([
|
||||
actions = [
|
||||
{ action: this._createInsightAction },
|
||||
{ action: this._copyAction },
|
||||
{ action: this._saveAction }
|
||||
]);
|
||||
];
|
||||
} else {
|
||||
this.taskbar.setContent([{ action: this._createInsightAction }]);
|
||||
actions = [{ action: this._createInsightAction }];
|
||||
}
|
||||
if (!this._renderOptionsInline) {
|
||||
actions.push({ action: this._configureChartAction });
|
||||
}
|
||||
this.taskbar.setContent(actions);
|
||||
}
|
||||
|
||||
private createOption(option: IChartOption, container: HTMLElement) {
|
||||
@@ -318,6 +333,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
case ControlType.combo:
|
||||
//pass options into changeAltNames in order for SelectBox to show user-friendly names.
|
||||
let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options), undefined, this._contextViewService);
|
||||
dropdown.setAriaLabel(option.label);
|
||||
dropdown.select(option.options.indexOf(value));
|
||||
dropdown.render(optionInput);
|
||||
dropdown.onDidSelect(e => {
|
||||
@@ -337,6 +353,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
break;
|
||||
case ControlType.input:
|
||||
let input = new InputBox(optionInput, this._contextViewService);
|
||||
input.setAriaLabel(option.label);
|
||||
input.value = value || '';
|
||||
input.onDidChange(e => {
|
||||
if (this.options[option.configEntry] !== e) {
|
||||
@@ -355,6 +372,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
break;
|
||||
case ControlType.numberInput:
|
||||
let numberInput = new InputBox(optionInput, this._contextViewService, { type: 'number' });
|
||||
numberInput.setAriaLabel(option.label);
|
||||
numberInput.value = value || '';
|
||||
numberInput.onDidChange(e => {
|
||||
if (this.options[option.configEntry] !== Number(e)) {
|
||||
@@ -373,6 +391,7 @@ export class ChartView extends Disposable implements IPanelView {
|
||||
break;
|
||||
case ControlType.dateInput:
|
||||
let dateInput = new InputBox(optionInput, this._contextViewService, { type: 'datetime-local' });
|
||||
dateInput.setAriaLabel(option.label);
|
||||
dateInput.value = value || '';
|
||||
dateInput.onDidChange(e => {
|
||||
if (this.options[option.configEntry] !== e) {
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { localize } from 'vs/nls';
|
||||
import { ChartView } from 'sql/workbench/contrib/charts/browser/chartView';
|
||||
import { Modal } from 'sql/workbench/browser/modal/modal';
|
||||
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
|
||||
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
|
||||
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
|
||||
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
|
||||
import { ILogService } from 'vs/platform/log/common/log';
|
||||
import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfigurationService';
|
||||
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
|
||||
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
|
||||
|
||||
export class ConfigureChartDialog extends Modal {
|
||||
constructor(
|
||||
title: string,
|
||||
name: string,
|
||||
private _chart: ChartView,
|
||||
@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService,
|
||||
@IThemeService themeService: IThemeService,
|
||||
@IAdsTelemetryService telemetryService: IAdsTelemetryService,
|
||||
@IContextKeyService contextKeyService: IContextKeyService,
|
||||
@IClipboardService clipboardService: IClipboardService,
|
||||
@ILogService logService: ILogService,
|
||||
@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService
|
||||
) {
|
||||
super(title, name, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, undefined);
|
||||
}
|
||||
|
||||
public open() {
|
||||
this.show();
|
||||
}
|
||||
|
||||
public render() {
|
||||
super.render();
|
||||
attachModalDialogStyler(this, this._themeService);
|
||||
|
||||
let closeButton = this.addFooterButton(localize('configureChartDialog.close', "Close"), () => this.close());
|
||||
attachButtonStyler(closeButton, this._themeService);
|
||||
}
|
||||
|
||||
protected renderBody(container: HTMLElement) {
|
||||
container.appendChild(this._chart.optionsControl);
|
||||
}
|
||||
|
||||
protected layout(height?: number): void {
|
||||
}
|
||||
|
||||
public close() {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.actionbar-container {
|
||||
@@ -26,6 +27,7 @@
|
||||
}
|
||||
|
||||
.options-container {
|
||||
padding: 20px;
|
||||
min-width: 250px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@@ -14,22 +14,32 @@ import { TestNotificationService } from 'vs/platform/notification/test/common/te
|
||||
|
||||
suite('Chart View', () => {
|
||||
test('initializes without error', () => {
|
||||
const chartview = createChartView();
|
||||
const chartview = createChartView(true);
|
||||
assert(chartview);
|
||||
});
|
||||
|
||||
test('renders without error', () => {
|
||||
const chartview = createChartView();
|
||||
const chartview = createChartView(true);
|
||||
chartview.render(document.createElement('div'));
|
||||
});
|
||||
|
||||
test('initializes without error - without options', () => {
|
||||
const chartview = createChartView(false);
|
||||
assert(chartview);
|
||||
});
|
||||
|
||||
test('renders without error - without options', () => {
|
||||
const chartview = createChartView(false);
|
||||
chartview.render(document.createElement('div'));
|
||||
});
|
||||
});
|
||||
|
||||
function createChartView(): ChartView {
|
||||
function createChartView(renderOptions: boolean): ChartView {
|
||||
const layoutService = new TestLayoutService();
|
||||
const contextViewService = new ContextViewService(layoutService);
|
||||
const themeService = new TestThemeService();
|
||||
const instantiationService = new TestInstantiationService();
|
||||
const notificationService = new TestNotificationService();
|
||||
instantiationService.stub(IThemeService, themeService);
|
||||
return new ChartView(contextViewService, themeService, instantiationService, notificationService);
|
||||
return new ChartView(renderOptions, contextViewService, themeService, instantiationService, notificationService);
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@ class DataResourceTable extends GridTableBase<any> {
|
||||
) {
|
||||
super(state, createResultSet(source), contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
|
||||
this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.documentUri);
|
||||
this._chart = this.instantiationService.createInstance(ChartView);
|
||||
this._chart = this.instantiationService.createInstance(ChartView, false);
|
||||
}
|
||||
|
||||
get gridDataProvider(): IGridDataProvider {
|
||||
@@ -389,13 +389,13 @@ export class NotebookChartAction extends ToggleableAction {
|
||||
public static SHOWCHART_LABEL = localize('notebook.showChart', "Show chart");
|
||||
public static SHOWCHART_ICON = 'viewChart';
|
||||
|
||||
public static HIDECHART_LABEL = localize('notebook.hideChart', "Hide chart");
|
||||
public static HIDECHART_ICON = 'close';
|
||||
public static SHOWTABLE_LABEL = localize('notebook.showTable', "Show table");
|
||||
public static SHOWTABLE_ICON = 'table';
|
||||
|
||||
constructor(private resourceTable: DataResourceTable) {
|
||||
super(NotebookChartAction.ID, {
|
||||
toggleOnLabel: NotebookChartAction.HIDECHART_LABEL,
|
||||
toggleOnClass: NotebookChartAction.HIDECHART_ICON,
|
||||
toggleOnLabel: NotebookChartAction.SHOWTABLE_LABEL,
|
||||
toggleOnClass: NotebookChartAction.SHOWTABLE_ICON,
|
||||
toggleOffLabel: NotebookChartAction.SHOWCHART_LABEL,
|
||||
toggleOffClass: NotebookChartAction.SHOWCHART_ICON,
|
||||
isOn: false
|
||||
|
||||
@@ -5,7 +5,10 @@
|
||||
|
||||
.vs .icon.table,
|
||||
.vs-dark .icon.table,
|
||||
.hc-black .icon.table {
|
||||
.hc-black .icon.table,
|
||||
.vs .codicon.table,
|
||||
.vs-dark .codicon.table,
|
||||
.hc-black .codicon.table {
|
||||
background: url("Table.svg") center center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user