Created
January 8, 2021 19:22
-
-
Save gustavoquinalha/09da410196af613c596f49e1d26d87ab to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
configSpread = { | |
props: { | |
styleInfo: this.sanitizer.bypassSecurityTrustStyle('width: 100%; height: calc(100vh - 300px)'), | |
config: { | |
ribbon: [ | |
{ | |
id: 'home', | |
text: 'HOME', | |
buttonGroups: [ | |
{ | |
label: 'Undo', | |
thumbnailClass: 'ribbon-thumbnail-undoredo', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'undo', | |
'redo', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Fonts', | |
indicator: 'indicatorFonts', | |
thumbnailClass: 'ribbon-thumbnail-fonts', | |
commandGroup: { | |
direction: 'vertical', | |
children: [ | |
{ | |
commands: [ | |
'fontFamily', | |
'fontSize', | |
'increaseFontsize', | |
'decreaseFontsize', | |
], | |
}, | |
{ | |
commands: [ | |
'fontWeight', | |
'fontItalic', | |
'fontUnderline', | |
'fontDoubleUnderline', | |
'separator', | |
'border', | |
'separator', | |
'backColor', | |
'foreColor', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Alignment', | |
indicator: 'indicatorAlignment', | |
thumbnailClass: 'ribbon-thumbnail-alignment', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
children: [ | |
{ | |
commands: [ | |
'topAlign', | |
'middleAlign', | |
'bottomAlign', | |
'separator', | |
'orientationList', | |
], | |
}, | |
{ | |
commands: [ | |
'leftAlign', | |
'centerAlign', | |
'rightAlign', | |
'separator', | |
'decreaseIndent', | |
'increaseIndent', | |
], | |
}, | |
], | |
}, | |
{ | |
type: 'separator', | |
}, | |
{ | |
direction: 'vertical', | |
children: [ | |
{ | |
commands: [ | |
'wrapText', | |
], | |
}, | |
{ | |
commands: [ | |
'mergeCenter', | |
'alignmentMergeList', | |
], | |
}, | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Numbers', | |
indicator: 'indicatorNumbers', | |
thumbnailClass: 'ribbon-thumbnail-numbers', | |
commandGroup: { | |
direction: 'vertical', | |
children: [ | |
{ | |
commands: [ | |
'ribbonNumberFormat', | |
], | |
}, | |
{ | |
commands: [ | |
'formatPercentage', | |
'formatComma', | |
'separator', | |
'increaseDecimal', | |
'decreaseDecimal', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Styles', | |
thumbnailClass: 'ribbon-thumbnail-styles', | |
commandGroup: { | |
commands: [ | |
'conditionFormat', | |
'formatTable2', | |
'cellStyles', | |
'cellStates', | |
], | |
}, | |
}, | |
{ | |
label: 'Cells', | |
thumbnailClass: 'ribbon-thumbnail-cells', | |
commandGroup: { | |
commands: [ | |
'cellsInsert', | |
'cellsDelete', | |
'cellsFormat', | |
], | |
}, | |
}, | |
{ | |
label: 'Editing', | |
thumbnailClass: 'ribbon-thumbnail-editing', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
children: [ | |
{ | |
commands: [ | |
'editingAutoSum', | |
'editingAutoSumList', | |
], | |
}, | |
{ | |
commands: [ | |
'editingFillDown', | |
'editingFillDownList', | |
], | |
}, | |
{ | |
commands: [ | |
'clear', | |
'editingClearAllList', | |
], | |
}, | |
], | |
}, | |
{ | |
commands: [ | |
'editingSortFilter', | |
], | |
}, | |
{ | |
commands: [ | |
'editingFind', | |
], | |
}, | |
], | |
}, | |
}, | |
], | |
}, | |
{ | |
id: 'insert', | |
text: 'INSERT', | |
buttonGroups: [ | |
{ | |
label: 'Line', | |
thumbnailClass: 'ribbon-thumbnail-barcode', | |
commandGroup: { | |
commands: [ | |
'insertLine', | |
], | |
}, | |
}, | |
{ | |
label: 'Column', | |
thumbnailClass: 'ribbon-thumbnail-barcode', | |
commandGroup: { | |
commands: [ | |
'insertColumn', | |
], | |
}, | |
}, | |
{ | |
label: 'WinLoss', | |
thumbnailClass: 'ribbon-thumbnail-barcode', | |
commandGroup: { | |
commands: [ | |
'insertWinLoss', | |
], | |
}, | |
}, | |
{ | |
label: 'Area', | |
thumbnailClass: 'ribbon-thumbnail-barcode', | |
commandGroup: { | |
commands: [ | |
'insertArea', | |
], | |
}, | |
}, | |
], | |
}, | |
{ | |
id: 'data', | |
text: 'DATA', | |
buttonGroups: [ | |
{ | |
label: 'Data Tools', | |
thumbnailClass: 'ribbon-thumbnail-datatools', | |
commandGroup: { | |
children: [ | |
{ | |
commands: [ | |
'dataValidation', | |
'dataValidationList', | |
], | |
}, | |
], | |
}, | |
}, | |
], | |
}, | |
{ | |
id: 'view', | |
text: 'VIEW', | |
buttonGroups: [ | |
{ | |
label: 'Show/Hide', | |
thumbnailClass: 'ribbon-thumbnail-showhide', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'showHideRowHeader', | |
'showHideColumnHeader', | |
], | |
}, | |
{ | |
type: 'separator', | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'showHideVGridLine', | |
'showHideHGridLine', | |
], | |
}, | |
{ | |
type: 'separator', | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'showHideTabStrip', | |
'showHideNewTab', | |
], | |
}, | |
], | |
}, | |
}, | |
], | |
}, | |
{ | |
id: 'settings', | |
text: 'SETTINGS', | |
buttonGroups: [ | |
{ | |
label: 'Spread Settings', | |
thumbnailClass: 'ribbon-thumbnail-spreadsettings', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'spreadSettingGeneral', | |
], | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'spreadSettingScrollBar', | |
'spreadSettingCalculation', | |
'spreadSettingTabStrip', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Sheet Settings', | |
thumbnailClass: 'ribbon-thumbnail-sheetsettings', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'sheetSettingGeneral', | |
], | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'sheetSettingGridLine', | |
'sheetSettingHeaders', | |
], | |
}, | |
], | |
}, | |
}, | |
], | |
}, | |
{ | |
id: 'tableDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Properties', | |
thumbnailClass: 'ribbon-thumbnail-properties', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'tableName', | |
'resizeTable', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Tools', | |
thumbnailClass: 'ribbon-thumbnail-tools', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'convertToRange', | |
'tableAllowAutoExpand', | |
], | |
}, | |
{ | |
commands: [ | |
'insertSlicer', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Table Style Options', | |
thumbnailClass: 'ribbon-thumbnail-tablestyleoptions', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'tableStyleHeaderRow', | |
'tableStyleTotalRow', | |
'tableStyleBandedRows', | |
], | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'tableStyleFirstColumn', | |
'tableStyleLastColumn', | |
'tableStyleBandedColumns', | |
], | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'tableStyleResizeHandler', | |
'tableStyleFilterButton', | |
'tableStyleTotalRowList', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Table Styles', | |
thumbnailClass: 'ribbon-thumbnail-tablestyles', | |
commandGroup: { | |
commands: [ | |
'formatTable', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'TableSelected', | |
}, | |
{ | |
id: 'chartDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Chart Layouts', | |
thumbnailClass: 'ribbon-thumbnail-chartlayouts', | |
commandGroup: { | |
commands: [ | |
'addChartElement', | |
'quickLayout', | |
], | |
}, | |
}, | |
{ | |
label: 'Chart Styles', | |
thumbnailClass: 'ribbon-thumbnail-chartstyles', | |
commandGroup: { | |
commands: [ | |
'changeColors', | |
'chartStyle', | |
], | |
}, | |
}, | |
{ | |
label: 'Data', | |
thumbnailClass: 'ribbon-thumbnail-chartdata', | |
commandGroup: { | |
commands: [ | |
'switchRowColumn', | |
'selectData', | |
], | |
}, | |
}, | |
{ | |
label: 'Type', | |
thumbnailClass: 'ribbon-thumbnail-charttype', | |
commandGroup: { | |
commands: [ | |
'changeChartType', | |
], | |
}, | |
}, | |
{ | |
label: 'Location', | |
thumbnailClass: 'ribbon-thumbnail-chartlocation', | |
commandGroup: { | |
commands: [ | |
'moveChart', | |
], | |
}, | |
}, | |
{ | |
label: 'Accessiblity', | |
thumbnailClass: 'ribbon-thumbnail-chart-alt-text', | |
commandGroup: { | |
commands: [ | |
'chartAltText', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'singleChartSelected', | |
}, | |
{ | |
id: 'pictureDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Accessiblity', | |
thumbnailClass: 'ribbon-thumbnail-chart-alt-text', | |
commandGroup: { | |
commands: [ | |
'pictureAltText', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'pictureSelected && !IsProtected || pictureSelected && AllowEditObject', | |
}, | |
{ | |
id: 'shapeDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Insert Shape', | |
thumbnailClass: 'ribbon-thumbnail-shapeinsertshape', | |
commandGroup: { | |
commands: [ | |
'insertShapeList', | |
'changeShape', | |
], | |
}, | |
}, | |
{ | |
label: 'Shape Styles', | |
thumbnailClass: 'ribbon-thumbnail-shapeStyles', | |
commandGroup: { | |
commands: [ | |
'changeShapeStyle', | |
], | |
}, | |
}, | |
{ | |
label: 'Accessiblity', | |
thumbnailClass: 'ribbon-thumbnail-chart-alt-text', | |
commandGroup: { | |
commands: [ | |
'shapeAltText', | |
], | |
}, | |
}, | |
{ | |
label: 'Rotate', | |
thumbnailClass: 'ribbon-thumbnail-shaperotate', | |
commandGroup: { | |
commands: [ | |
'shapeRotate', | |
], | |
}, | |
}, | |
{ | |
label: 'Group', | |
thumbnailClass: 'ribbon-thumbnail-shapegroup', | |
commandGroup: { | |
commands: [ | |
'shapeCommandGroup', | |
], | |
}, | |
}, | |
{ | |
class: 'gc-ribbon-panelgroup-shapeSize', | |
label: 'Size', | |
thumbnailClass: 'ribbon-thumbnail-shapesize', | |
commandGroup: { | |
direction: 'vertical', | |
commands: [ | |
'shapeSizeHeight', | |
'shapeSizeWidth', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'ShapeSelected && !IsProtected || ShapeSelected && AllowEditObject', | |
}, | |
{ | |
id: 'slicerDesign', | |
text: 'OPTIONS', | |
buttonGroups: [ | |
{ | |
class: 'slicer_panel', | |
label: 'Slicer', | |
thumbnailClass: 'ribbon-thumbnail-properties', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
'type': 'group', | |
commands: [ | |
'captionName', | |
'slicerSetting', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Slicer Styles', | |
thumbnailClass: 'ribbon-thumbnail-tablestyles', | |
commandGroup: { | |
commands: [ | |
'slicerFormat', | |
], | |
}, | |
}, | |
{ | |
class: 'slicer_buttons', | |
label: 'Buttons', | |
thumbnailClass: 'ribbon-thumbnail-properties', | |
commandGroup: { | |
direction: 'vertical', | |
commands: [ | |
'columnCount', | |
'itemHeight', | |
'itemWidth', | |
], | |
}, | |
}, | |
{ | |
class: 'slicer_size', | |
label: 'Size', | |
thumbnailClass: 'ribbon-thumbnail-sliceSize', | |
commandGroup: { | |
direction: 'vertical', | |
commands: [ | |
'slicerHeight', | |
'slicerWidth', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'SlicerSelected && !IsProtected || SlicerSelected && AllowEditObject', | |
}, | |
{ | |
id: 'formulaSparkLineDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Argument', | |
thumbnailClass: 'ribbon-thumbnail-argument', | |
commandGroup: { | |
commands: [ | |
'formulaSparklineSetting', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'FormulaSparklineSelected', | |
}, | |
{ | |
id: 'sparkLineDesign', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Type', | |
thumbnailClass: 'ribbon-thumbnai-sparkline-type', | |
commandGroup: { | |
commands: [ | |
'lineSparkline', | |
'columnSparkline', | |
'winLossSparkline', | |
], | |
}, | |
}, | |
{ | |
label: 'Show', | |
thumbnailClass: 'ribbon-thumbnail-sparkline-show', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'showHighpoint', | |
'showLowPoint', | |
'showNegativePoint', | |
], | |
}, | |
{ | |
direction: 'vertical', | |
commands: [ | |
'showFirstPoint', | |
'showLastPoint', | |
'showMarkers', | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Style', | |
thumbnailClass: 'ribbon-thumbnail-sparkline-style', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'sparklineColor', | |
'sparklineMarkerColor', | |
], | |
}, | |
{ | |
commands: [ | |
'sparklineWeight', | |
], | |
}, | |
], | |
}, | |
], | |
}, | |
}, | |
{ | |
label: 'Group', | |
thumbnailClass: 'ribbon-thumbnail-sparkline-groups', | |
commandGroup: { | |
children: [ | |
{ | |
direction: 'vertical', | |
children: [ | |
{ | |
direction: 'vertical', | |
commands: [ | |
'sparklineGroup', | |
'sparklineUnGroup', | |
], | |
}, | |
{ | |
commands: [ | |
'clearSparkline', | |
'clearSparklineDropdown', | |
], | |
}, | |
], | |
}, | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'SparklineSelected', | |
}, | |
{ | |
id: 'barcodeDesignId', | |
text: 'DESIGN', | |
buttonGroups: [ | |
{ | |
label: 'Argument', | |
thumbnailClass: 'ribbon-thumbnail-argument', | |
commandGroup: { | |
commands: [ | |
'barCodeSetting', | |
], | |
}, | |
}, | |
], | |
visibleWhen: 'BarCodeSelected', | |
}, | |
], | |
contextMenu: [ | |
'contextMenuCut', | |
'contextMenuCopy', | |
'contextMenuPaste', | |
'designerPasteAll', | |
'pasteFormula', | |
'designerPasteValues', | |
'designerPasteFormatting', | |
'pasteValuesFormatting', | |
'pasteFormulaFormatting', | |
'floatingObjectCut', | |
'floatingObjectCopy', | |
'contextMenuCutShapes', | |
'contextMenuCopyShapes', | |
'PasteShapes', | |
'separator', | |
'resetChartColor', | |
'changeChartTypeDialog', | |
'selectChartDataDialog', | |
'moveChartDialog', | |
'formatChart', | |
'separator', | |
'insertDialog', | |
'deleteDialog', | |
'gc.spread.contextMenu.insertColumns', | |
'gc.spread.contextMenu.deleteColumns', | |
'gc.spread.contextMenu.insertRows', | |
'gc.spread.contextMenu.deleteRows', | |
'tableInsert', | |
'tableDelete', | |
'gc.spread.contextMenu.clearContents', | |
'separator', | |
'gc.spread.contextMenu.rowHeaderinsertCopiedCells', | |
'gc.spread.contextMenu.rowHeaderinsertCutCells', | |
'gc.spread.contextMenu.colHeaderinsertCopiedCells', | |
'gc.spread.contextMenu.colHeaderinsertCutCells', | |
'insertCopiedCells', | |
'insertCutCells', | |
'separator', | |
'gc.spread.contextMenu.insertSheet', | |
'gc.spread.contextMenu.deleteSheet', | |
'unprotectSheet', | |
'protectSheet', | |
'separator', | |
'gc.spread.contextMenu.filter', | |
'sort', | |
'table', | |
'separator', | |
'gc.spread.contextMenu.insertComment', | |
'gc.spread.contextMenu.editComment', | |
'gc.spread.contextMenu.deleteComment', | |
'gc.spread.contextMenu.toggleComment', | |
'formatComment', | |
'separator', | |
'formatCells', | |
'editCellType', | |
'editCellDropdowns', | |
'link', | |
'editHyperlink', | |
'openHyperlink', | |
'removeHyperlink', | |
'removeHyperlinks', | |
'separator', | |
'richText', | |
'defineName', | |
'cellTag', | |
'rowTag', | |
'colTag', | |
'columnWidth', | |
'rowHeight', | |
'gc.spread.contextMenu.hideColumns', | |
'gc.spread.contextMenu.hideRows', | |
'gc.spread.contextMenu.unhideColumns', | |
'gc.spread.contextMenu.unhideRows', | |
'columnHeaders', | |
'contextMenuOutlineColumn', | |
'rowHeaders', | |
'separator', | |
'showTabColor', | |
'gc.spread.contextMenu.hideSheet', | |
'gc.spread.contextMenu.unhideSheet', | |
'sheetTag', | |
'separator', | |
'gc.spread.contextMenu.cut', | |
'gc.spread.contextMenu.copy', | |
'slicerPasteOptions', | |
'gc.spread.contextMenu.pasteAll', | |
'gc.spread.contextMenu.slicerSortAscend', | |
'gc.spread.contextMenu.slicerSortDescend', | |
'gc.spread.contextMenu.removeSlicer', | |
'slicerProperty', | |
'contextMenuSlicerSetting', | |
'separator', | |
'groupShape', | |
'formatShapes', | |
'designerMoreFunctions', | |
], | |
fileMenu: 'fileMenuButton', | |
sidePanels: [ | |
{ | |
position: 'top', | |
allowResize: true, | |
command: 'formulaBarPanel', | |
uiTemplate: 'formulaBarTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'fieldListTreePanel', | |
uiTemplate: 'filedListTemplate', | |
}, | |
{ | |
position: 'bottom', | |
command: 'statusBarPanel', | |
uiTemplate: 'statusBarPanelTemplate', | |
}, | |
{ | |
position: 'full', | |
command: 'fileMenuPanel', | |
uiTemplate: 'fileMenuPanelTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'shapePanel', | |
uiTemplate: 'shapeTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'columnChartPanel', | |
uiTemplate: 'columnChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'lineChartPanel', | |
uiTemplate: 'lineChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'pieChartPanel', | |
uiTemplate: 'pieChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'barChartPanel', | |
uiTemplate: 'barChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'areaChartPanel', | |
uiTemplate: 'areaChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'scatterChartPanel', | |
uiTemplate: 'scatterChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'stockChartPanel', | |
uiTemplate: 'stockChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'radarChartPanel', | |
uiTemplate: 'radarChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'sunburstChartPanel', | |
uiTemplate: 'sunburstChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'treeMapChartPanel', | |
uiTemplate: 'treeMapChartPanelTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'funnelChartPanel', | |
uiTemplate: 'funnelChartPanelTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'comboChartPanel', | |
uiTemplate: 'comboChartTemplate', | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'chartAltTextPanel', | |
uiTemplate: 'altTextTemplate', | |
'showCloseButton': true, | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'pictureAltTextPanel', | |
uiTemplate: 'altTextTemplate', | |
'showCloseButton': true, | |
}, | |
{ | |
position: 'right', | |
width: '315px', | |
command: 'shapeAltTextPanel', | |
uiTemplate: 'altTextTemplate', | |
'showCloseButton': true, | |
}, | |
], | |
}, | |
}, | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment