fix standart chart resize in pivot, improve performance

.eslintrc.cjs

@@ -14,7 +14,9 @@ module.exports = {
     'vue/no-mutating-props': 'warn',
     'vue/no-reserved-component-names': 'warn',
     'vue/no-v-model-argument': 'off',
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': ['error', 'never']
   },
   overrides: [
     {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sqliteviz",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sqliteviz",
-      "version": "0.25.1",
+      "version": "0.26.0",
       "license": "Apache-2.0",
       "dependencies": {
         "buffer": "^6.0.3",
@@ -3259,12 +3259,20 @@
       "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
       "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "peer": true
+    },
     "node_modules/@types/react": {
-      "version": "19.0.10",
+      "version": "17.0.85",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.85.tgz",
-      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
+      "integrity": "sha512-5oBDUsRDsrYq4DdyHaL99gE1AJCfuDhyxqF6/55fvvOIRkp1PpKuwJ+aMiGJR+GJt7YqMNclPROTHF20vY2cXA==",
       "peer": true,
       "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "^0.16",
         "csstype": "^3.0.2"
       }
     },
@@ -3276,6 +3284,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "peer": true
+    },
     "node_modules/@types/supercluster": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",

src/components/CsvJsonImport/index.vue

@@ -1,10 +1,10 @@
 <template>
   <modal
-    :modal-id="dialogName"
+    :modalId="dialogName"
     class="dialog"
-    content-class="import-modal"
+    contentClass="import-modal"
     scrollable
-    :click-to-close="false"
+    :clickToClose="false"
   >
     <div class="dialog-header">
       {{ typeName }} import
@@ -17,7 +17,7 @@
         label="Table name"
         width="484px"
         :disabled="disableDialog"
-        :error-msg="tableNameError"
+        :errorMsg="tableNameError"
       />
       <div v-if="!isJson && !isNdJson" class="chars">
         <delimiter-selector
@@ -45,7 +45,7 @@
             The character used to escape the quote character within a field
             (e.g. "column with ""quotes"" in text").
           '
-          max-hint-width="242px"
+          maxHintWidth="242px"
           width="93px"
           :disabled="disableDialog"
           class="char-input"

src/components/DbUploader.vue

@@ -47,7 +47,7 @@
       ref="addCsvJson"
       :file="file"
       :db="newDb"
-      dialog-name="importFromCsvJson"
+      dialogName="importFromCsvJson"
       @cancel="cancelImport"
       @finish="finish"
     />

src/components/LoadingDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <modal
-    :modal-id="name"
+    :modalId="name"
     class="dialog"
-    :click-to-close="false"
+    :clickToClose="false"
-    :content-transition="{ name: 'loading-dialog' }"
+    :contentTransition="{ name: 'loading-dialog' }"
-    :overlay-transition="{ name: 'loading-dialog' }"
+    :overlayTransition="{ name: 'loading-dialog' }"
   >
     <div class="dialog-header">
       {{ title }}

src/components/SqlTable/Pager.vue

@@ -1,19 +1,19 @@
 <template>
   <paginate
     v-model="page"
-    :page-count="pageCount"
+    :pageCount="pageCount"
-    :page-range="5"
+    :pageRange="5"
-    :margin-pages="1"
+    :marginPages="1"
-    :prev-text="chevron"
+    :prevText="chevron"
-    :next-text="chevron"
+    :nextText="chevron"
-    :no-li-surround="true"
+    :noLiSurround="true"
-    container-class="paginator-continer"
+    containerClass="paginator-continer"
-    page-link-class="paginator-page-link"
+    pageLinkClass="paginator-page-link"
-    active-class="paginator-active-page"
+    activeClass="paginator-active-page"
-    break-view-link-class="paginator-break"
+    breakViewLinkClass="paginator-break"
-    next-link-class="paginator-next"
+    nextLinkClass="paginator-next"
-    prev-link-class="paginator-prev"
+    prevLinkClass="paginator-prev"
-    disabled-class="paginator-disabled"
+    disabledClass="paginator-disabled"
   />
 </template>
 

src/components/SqlTable/index.vue

@@ -62,7 +62,7 @@
       <pager
         v-show="pageCount > 1"
         v-model="currentPage"
-        :page-count="pageCount"
+        :pageCount="pageCount"
       />
     </div>
   </div>

src/components/TextField.vue

@@ -9,7 +9,7 @@
         v-if="hint"
         class="hint"
         :hint="hint"
-        :max-width="maxHintWidth || '149px'"
+        :maxWidth="maxHintWidth || '149px'"
       />
     </div>
     <input

src/views/MainView/AppDiagnosticInfo.vue

@@ -5,7 +5,7 @@
       src="~@/assets/images/info.svg"
       @click="$modal.show('app-info')"
     />
-    <modal modal-id="app-info" class="dialog" content-class="app-info-modal">
+    <modal modalId="app-info" class="dialog" contentClass="app-info-modal">
       <div class="dialog-header">
         App info
         <close-icon @click="$modal.hide('app-info')" />

src/views/MainView/Inquiries/index.vue

@@ -122,7 +122,7 @@
                       <copy-icon @click="duplicateInquiry(index)" />
                       <export-icon
                         tooltip="Export inquiry to file"
-                        tooltip-position="top-left"
+                        tooltipPosition="top-left"
                         @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                       />
                       <delete-icon
@@ -140,7 +140,7 @@
     </div>
 
     <!--Rename Inquiry dialog  -->
-    <modal modal-id="rename" class="dialog" content-style="width: 560px;">
+    <modal modalId="rename" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Rename inquiry
         <close-icon @click="$modal.hide('rename')" />
@@ -149,7 +149,7 @@
         <text-field
           v-model="newName"
           label="New inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
           width="100%"
         />
       </div>
@@ -160,7 +160,7 @@
     </modal>
 
     <!--Delete Inquiry dialog  -->
-    <modal modal-id="delete" class="dialog" content-style="width: 480px;">
+    <modal modalId="delete" class="dialog" contentStyle="width: 480px;">
       <div class="dialog-header">
         Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
         <close-icon @click="$modal.hide('delete')" />

src/views/MainView/MainMenu.vue

@@ -25,7 +25,7 @@
     </div>
 
     <!--Save Inquiry dialog  -->
-    <modal modal-id="save" class="dialog" content-style="width: 560px;">
+    <modal modalId="save" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Save inquiry
         <close-icon @click="cancelSave" />
@@ -39,7 +39,7 @@
         <text-field
           v-model="name"
           label="Inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
           width="100%"
         />
       </div>

src/views/MainView/Workspace/Schema/index.vue

@@ -26,7 +26,7 @@
       ref="addCsvJson"
       :file="file"
       :db="$store.state.db"
-      dialog-name="addCsvJson"
+      dialogName="addCsvJson"
     />
   </div>
 </template>

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="chartContainer" class="chart-container">
-    <div v-show="!dataSources && visible" class="warning chart-warning">
+    <div v-show="!dataSources" class="warning chart-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
@@ -9,18 +9,17 @@
       :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
     >
       <PlotlyEditor
-        v-show="visible"
         ref="plotlyEditor"
         :data="state.data"
         :layout="state.layout"
         :frames="state.frames"
         :config="config"
-        :data-sources="dataSources"
+        :dataSources="dataSources"
-        :data-source-options="dataSourceOptions"
+        :dataSourceOptions="dataSourceOptions"
         :plotly="plotly"
-        :use-resize-handler="useResizeHandler"
+        :useResizeHandler="useResizeHandler"
         :debug="true"
-        :advanced-trace-type-selector="true"
+        :advancedTraceTypeSelector="true"
         @update="update"
         @render="onRender"
       />
@@ -64,7 +63,6 @@ export default {
         displaylogo: false,
         modeBarButtonsToRemove: ['toImage']
       },
-      visible: true,
       resizeObserver: null,
       useResizeHandler: this.$store.state.isWorkspaceVisible
     }
@@ -137,7 +135,7 @@ export default {
     updatePlotly() {
       const plotComponent = this.$refs.plotlyEditor.plotComponentRef.current
       plotComponent.updatePlotly(
-        false, // shouldInvokeResizeHandler
+        true, // shouldInvokeResizeHandler
         plotComponent.props.onUpdate, // figureCallbackFunction
         false // shouldAttachUpdateEvents
       )

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue

@@ -9,11 +9,11 @@
           :options="colsToSelect"
           :disabled="colsToSelect.length === 0"
           :multiple="true"
-          :hide-selected="true"
+          :hideSelected="true"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :show-labels="false"
+          :showLabels="false"
           :max="colsToSelect.length"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder=""
         >
           <template #maxElements>
@@ -37,12 +37,12 @@
           :options="rowsToSelect"
           :disabled="rowsToSelect.length === 0"
           :multiple="true"
-          :hide-selected="true"
+          :hideSelected="true"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :show-labels="false"
+          :showLabels="false"
           :max="rowsToSelect.length"
-          :option-height="29"
+          :optionHeight="29"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder=""
         >
           <template #maxElements>
@@ -65,12 +65,12 @@
           class="sqliteviz-select short aggregator"
           :options="aggregators"
           label="name"
-          track-by="name"
+          trackBy="name"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :show-labels="false"
+          :showLabels="false"
-          :hide-selected="true"
+          :hideSelected="true"
-          :option-height="29"
+          :optionHeight="29"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder="Choose a function"
         >
           <template #noResult>
@@ -84,11 +84,11 @@
           class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :show-labels="false"
+          :showLabels="false"
-          :hide-selected="true"
+          :hideSelected="true"
-          :option-height="29"
+          :optionHeight="29"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder="Choose an argument"
         />
 
@@ -98,11 +98,11 @@
           class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :show-labels="false"
+          :showLabels="false"
-          :hide-selected="true"
+          :hideSelected="true"
-          :option-height="29"
+          :optionHeight="29"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder="Choose a second argument"
         />
       </div>
@@ -114,13 +114,13 @@
           class="sqliteviz-select short renderer"
           :options="renderers"
           label="name"
-          track-by="name"
+          trackBy="name"
-          :close-on-select="true"
+          :closeOnSelect="true"
-          :allow-empty="false"
+          :allowEmpty="false"
-          :show-labels="false"
+          :showLabels="false"
-          :hide-selected="true"
+          :hideSelected="true"
-          :option-height="29"
+          :optionHeight="29"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder="Choose a view"
         >
           <template #noResult>

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -6,7 +6,7 @@
     </div>
     <pivot-ui
       v-model="pivotOptions"
-      :key-names="columns"
+      :keyNames="columns"
       @update="$emit('update')"
     />
     <div ref="pivotOutput" class="pivot-output" />
@@ -35,6 +35,7 @@ import pivotHelper from './pivotHelper'
 import Chart from '@/views/MainView/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import events from '@/lib/utils/events'
+import plotly from 'plotly.js'
 
 export default {
   name: 'Pivot',
@@ -130,17 +131,19 @@ export default {
     // We need to detect resizing because plotly doesn't resize when resize its container
     // but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
     this.resizeObserver = new ResizeObserver(this.handleResize)
-    this.resizeObserver.observe(this.$refs.customChartOutput)
+    this.resizeObserver.observe(this.$refs.pivotOutput)
   },
   beforeUnmount() {
-    this.resizeObserver.unobserve(this.$refs.customChartOutput)
+    this.resizeObserver.unobserve(this.$refs.pivotOutput)
   },
   methods: {
     handleResize() {
       // hack: plotly changes size only on window.resize event,
-      // so, we trigger it when container resizes (e.g. when move splitter)
+      // so, we resize it manually when container resizes (e.g. when move splitter)
       if (this.viewStandartChart) {
-        window.dispatchEvent(new Event('resize'))
+        plotly.Plots.resize(
+          this.$refs.pivotOutput.querySelector('.js-plotly-plot')
+        )
       }
     },
 
@@ -184,9 +187,7 @@ export default {
       )
 
       // fix for Firefox: fit plotly renderers just after choosing it in pivotUi
-      if (this.viewStandartChart) {
+      this.handleResize()
-        window.dispatchEvent(new Event('resize'))
-      }
     },
 
     getOptionsForSave() {

src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue

@@ -4,9 +4,9 @@
       <component
         :is="mode"
         ref="viewComponent"
-        v-model:import-to-png-enabled="importToPngEnabled"
+        v-model:importToPngEnabled="importToPngEnabled"
-        v-model:import-to-svg-enabled="importToSvgEnabled"
+        v-model:importToSvgEnabled="importToSvgEnabled"
-        :init-options="mode === initMode ? initOptions : undefined"
+        :initOptions="mode === initMode ? initOptions : undefined"
         :data-sources="dataSource"
         @loading-image-completed="loadingImage = false"
         @update="$emit('update')"
@@ -16,7 +16,7 @@
       <icon-button
         :active="mode === 'chart'"
         tooltip="Switch to chart"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="mode = 'chart'"
       >
         <chart-icon />
@@ -25,7 +25,7 @@
         ref="pivotBtn"
         :active="mode === 'pivot'"
         tooltip="Switch to pivot"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="mode = 'pivot'"
       >
         <pivot-icon />
@@ -37,7 +37,7 @@
         :disabled="!importToPngEnabled || loadingImage"
         :loading="loadingImage"
         tooltip="Save as PNG image"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsPng"
       >
         <png-icon />
@@ -46,7 +46,7 @@
         ref="svgExportBtn"
         :disabled="!importToSvgEnabled"
         tooltip="Save as SVG"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsSvg"
       >
         <export-to-svg-icon />
@@ -55,7 +55,7 @@
       <icon-button
         ref="htmlExportBtn"
         tooltip="Save as HTML"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsHtml"
       >
         <HtmlIcon />
@@ -64,7 +64,7 @@
         ref="copyToClipboardBtn"
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="prepareCopy"
       >
         <clipboard-icon />
@@ -72,9 +72,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loading-msg="Rendering the visualisation..."
+      loadingMsg="Rendering the visualisation..."
-      success-msg="Image is ready"
+      successMsg="Image is ready"
-      action-btn-name="Copy"
+      actionBtnName="Copy"
       name="prepareCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"

src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue

@@ -3,7 +3,7 @@
     <icon-button
       :disabled="modelValue === 0"
       tooltip="First row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="first"
       @click="$emit('update:modelValue', 0)"
     >
@@ -12,7 +12,7 @@
     <icon-button
       :disabled="modelValue === 0"
       tooltip="Previous row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="prev"
       @click="$emit('update:modelValue', modelValue - 1)"
     >
@@ -21,7 +21,7 @@
     <icon-button
       :disabled="modelValue === total - 1"
       tooltip="Next row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="next"
       @click="$emit('update:modelValue', modelValue + 1)"
     >
@@ -30,7 +30,7 @@
     <icon-button
       :disabled="modelValue === total - 1"
       tooltip="Last row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="last"
       @click="$emit('update:modelValue', total - 1)"
     >

src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue

@@ -21,7 +21,7 @@
         <div class="value-viewer-container">
           <value-viewer
             v-show="selectedCell"
-            :cell-value="
+            :cellValue="
               selectedCell
                 ? result.values[result.columns[selectedCell.dataset.col]][
                     selectedCell.dataset.row
@@ -40,7 +40,7 @@
       <icon-button
         :disabled="!result"
         tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="exportToCsv"
       >
         <export-to-csv-icon />
@@ -50,7 +50,7 @@
         ref="copyToClipboardBtn"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="prepareCopy"
       >
         <clipboard-icon />
@@ -60,7 +60,7 @@
         ref="rowBtn"
         :disabled="!result"
         tooltip="View record"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewRecord"
         @click="toggleViewRecord"
       >
@@ -71,7 +71,7 @@
         ref="viewCellValueBtn"
         :disabled="!result"
         tooltip="View value"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
       >
@@ -80,9 +80,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loading-msg="Building CSV..."
+      loadingMsg="Building CSV..."
-      success-msg="CSV is ready"
+      successMsg="CSV is ready"
-      action-btn-name="Copy"
+      actionBtnName="Copy"
       name="prepareCSVCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
@@ -113,9 +113,9 @@
           v-if="result && !viewRecord"
           :data-set="result"
           :time="time"
-          :page-size="pageSize"
+          :pageSize="pageSize"
           :page="defaultPage"
-          :selected-cell-coordinates="defaultSelectedCell"
+          :selectedCellCoordinates="defaultSelectedCell"
           class="straight"
           @update-selected-cell="onUpdateSelectedCell"
         />
@@ -125,8 +125,8 @@
           ref="recordView"
           :data-set="result"
           :time="time"
-          :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
+          :selectedColumnIndex="selectedCell ? +selectedCell.dataset.col : 0"
-          :row-index="selectedCell ? +selectedCell.dataset.row : 0"
+          :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
           @update-selected-cell="onUpdateSelectedCell"
         />
       </div>

src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue

@@ -4,7 +4,7 @@
       ref="sqlEditorBtn"
       :active="panel === 'sqlEditor'"
       tooltip="Switch panel to SQL editor"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'sqlEditor')"
     >
       <sql-editor-icon />
@@ -14,7 +14,7 @@
       ref="tableBtn"
       :active="panel === 'table'"
       tooltip="Switch panel to result set"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'table')"
     >
       <table-icon />
@@ -24,7 +24,7 @@
       ref="dataViewBtn"
       :active="panel === 'dataView'"
       tooltip="Switch panel to data view"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'dataView')"
     >
       <data-view-icon />

src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue

@@ -5,7 +5,7 @@
         ref="cm"
         v-model:value="query"
         :options="cmOptions"
-        :original-style="true"
+        :originalStyle="true"
         @change="onChange"
       />
     </div>
@@ -15,7 +15,7 @@
         :disabled="runDisabled"
         :loading="isGettingResults"
         tooltip="Run SQL query"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="$emit('run')"
       >
         <run-icon :disabled="runDisabled" />

src/views/MainView/Workspace/Tabs/Tab/index.vue

@@ -25,7 +25,7 @@
       <sql-editor
         ref="sqlEditor"
         v-model="tab.query"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
         @switch-to="onSwitchView('sqlEditor', $event)"
         @run="tab.execute()"
       />
@@ -39,7 +39,7 @@
       <run-result
         :tab="tab"
         :result="tab.result"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
         :error="tab.error"
         :time="tab.time"
         @switch-to="onSwitchView('table', $event)"
@@ -54,8 +54,8 @@
       <data-view
         ref="dataView"
         :data-source="(tab.result && tab.result.values) || null"
-        :init-options="tab.viewOptions"
+        :initOptions="tab.viewOptions"
-        :init-mode="tab.viewType"
+        :initMode="tab.viewType"
         @switch-to="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
       />
@@ -134,7 +134,6 @@ export default {
       const fromPosition = this.tab.layout[from]
       this.tab.layout[from] = this.tab.layout[to]
       this.tab.layout[to] = fromPosition
-      window.dispatchEvent(new Event('resize'))
 
       events.send('inquiry.panel', null, { panel: to })
     },

src/views/MainView/Workspace/Tabs/index.vue

@@ -29,7 +29,7 @@
     </div>
 
     <!--Close tab warning dialog  -->
-    <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
+    <modal modalId="close-warn" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Close tab
         {{

tests/views/MainView/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js

@@ -123,10 +123,8 @@ describe('Chart.vue', () => {
     const newContainerWidth = initialContainerWidth * 2 || 1000
     const newContainerHeight = initialContainerHeight * 2 || 2000
 
-    wrapper.find('.chart-container').wrapperElement.parentElement.style.width =
+    container.style.width = `${newContainerWidth}px`
-      `${newContainerWidth}px`
+    container.style.height = `${newContainerHeight}px`
-    wrapper.find('.chart-container').wrapperElement.parentElement.style.height =
-      `${newContainerHeight}px`
 
     await flushPromises()
 
@@ -179,4 +177,34 @@ describe('Chart.vue', () => {
     expect(fIo.downloadFromUrl.calledOnceWith(url, 'chart'))
     wrapper.unmount()
   })
+
+  it('dataSources are passed correctly', async () => {
+    const dataSources = {
+      name: ['Gryffindor'],
+      points: [80]
+    }
+
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+    await flushPromises()
+    await wrapper.find('button.js-add-button').wrapperElement.click()
+
+    await flushPromises()
+
+    await wrapper
+      .find('.field .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    expect(wrapper.find('.Select__menu').text()).to.contain('name' + 'points')
+    wrapper.unmount()
+  })
 })

tests/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import Pivot from '@/views/MainView/Workspace/Tabs/Tab/DataView/Pivot'
 import chartHelper from '@/lib/chartHelper'
 import fIo from '@/lib/utils/fileIo'
@@ -533,4 +533,57 @@ describe('Pivot.vue', () => {
       fIo.downloadFromUrl.calledOnceWith('canvas data url', 'pivot')
     ).to.equal(true)
   })
+
+  it('resizes standart chart', async () => {
+    const wrapper = mount(Pivot, {
+      global: {
+        mocks: { $store: { state: { isWorkspaceVisible: true } } }
+      },
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container
+    })
+
+    await flushPromises()
+
+    const plotContainer = wrapper.find('.pivot-output').wrapperElement
+    const plot = wrapper.find('.svg-container').wrapperElement
+
+    const initialContainerWidth = plotContainer.scrollWidth
+    const initialContainerHeight = plotContainer.scrollHeight
+
+    const initialPlotWidth = plot.scrollWidth
+    const initialPlotHeight = plot.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    plotContainer.style.width = `${newContainerWidth}px`
+    plotContainer.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    const plotAfterResize = wrapper.find('.svg-container').wrapperElement
+    expect(plotAfterResize.scrollWidth).not.to.equal(initialPlotWidth)
+
+    expect(plotAfterResize.scrollWidth.scrollHeight).not.to.equal(
+      initialPlotHeight
+    )
+
+    wrapper.unmount()
+  })
 })