<commit_before><template>
  <div
    v-if="items"
    class="gobierto-data-sql-editor"
  >
    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-4-4">
        <SavingDialog
          ref="savingDialogVizElement"
          :value="name"
          :placeholder="labelVisName"
          :label-saved="labelSavedVisualization"
          :label-modified="labelModifiedVizualition"
          :is-viz-saving-prompt-visible="isVizSavingPromptVisible"
          :is-viz-modified="isVizModified"
          :is-viz-saved="isVizSaved"
          :is-viz-item-modified="isVizItemModified"
          :is-user-logged="isUserLogged"
          :enabled-fork-viz-button="enabledForkVizButton"
          :enabled-viz-saved-button="enabledVizSavedButton"
          :is-query-saving-prompt-visible="isQuerySavingPromptVisible"
          :show-private-public-icon-viz="showPrivatePublicIconViz"
          :show-private-viz="showPrivateViz"
          :show-label-edit="showLabelEdit"
          :reset-private="resetPrivate"
          @save="onSaveEventHandler"
          @keyDownInput="updateVizName"
          @handlerFork="handlerForkViz"
          @isPrivateChecked="isPrivateChecked"
          @showToggleConfig="showPromptSaveViz"
          @handlerRevertViz="hidePromptSaveViz"
        />
      </div>
      <div
        v-if="queryName"
        class="gobierto-data-visualization-query-container"
      >
        <span class="gobierto-data-summary-queries-panel-title">{{ labelQuery }}:</span>
        <router-link
          :to="`/datos/${$route.params.id}/q/${queryID}`"
          class="gobierto-data-summary-queries-container-name"
        >
          {{ queryName }}
        </router-link>
      </div>
    </div>
    <div class="gobierto-data-visualization--aspect-ratio-16-9">
      <template v-if="saveLoader">
        <Loading />
      </template>
      <template v-else>
        <Visualizations
          v-if="items"
          ref="viewer"
          class="gobierto-data-visualization--item"
          :items="items"
          :config="config"
          :object-columns="objectColumns"
          :config-map="configMap"
          @showSaving="showSavingDialog"
        />
      </template>
    </div>
  </div>
</template>
<script>
import { Loading } from "lib/vue/components";
import Visualizations from "./../commons/Visualizations.vue";
import SavingDialog from "./../commons/SavingDialog.vue";
import { getUserId } from "./../../../lib/helpers";

export default {
  name: "VisualizationsItem",
  components: {
    Visualizations,
    SavingDialog,
    Loading
  },
  props: {
    datasetId: {
      type: Number,
      required: true
    },
    isUserLogged: {
      type: Boolean,
      default: false
    },
    privateVisualizations: {
      type: Array,
      default: () => []
    },
    publicVisualizations: {
      type: Array,
      default: () => []
    },
    privateQueries: {
      type: Array,
      default: () => []
    },
    publicQueries: {
      type: Array,
      default: () => []
    },
    isVizModified: {
      type: Boolean,
      default: false
    },
    isVizSaved: {
      type: Boolean,
      default: false
    },
    isVizSavingPromptVisible: {
      type: Boolean,
      default: false
    },
    enabledVizSavedButton: {
      type: Boolean,
      default: false
    },
    enabledForkVizButton: {
      type: Boolean,
      default: true
    },
    vizInputFocus: {
      type: Boolean,
      default: false
    },
    showPrivatePublicIconViz: {
      type: Boolean,
      default: false
    },
    showPrivateViz: {
      type: Boolean,
      default: false
    },
    showPrivate: {
      type: Boolean,
      default: false
    },
    showLabelEdit: {
      type: Boolean,
      default: false
    },
    isVizItemModified: {
      type: Boolean,
      default: false
    },
    resetPrivate: {
      type: Boolean,
      default: false
    },
    vizId: {
      type: Number,
      default: 0
    },
    userSaveViz: {
      type: Number,
      default: 0
    },
    objectColumns: {
      type: Object,
      default: () => {}
    },
    configMap: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      labelVisName: I18n.t('gobierto_data.projects.visName') || "",
      labelVisualize: I18n.t('gobierto_data.projects.visualize') || "",
      labelDashboard: I18n.t('gobierto_data.projects.dashboards') || "",
      labelSavedVisualization: I18n.t("gobierto_data.projects.savedVisualization") || "",
      labelModifiedVizualition: I18n.t("gobierto_data.projects.modifiedVisualization") || "",
      labelQuery: I18n.t("gobierto_data.projects.query") || "",
      items: null,
      config: {},
      vizSaveID: null,
      queryID: '',
      queryName: '',
      user: null,
      queryViz: '',
      isVizElementSavingVisible: false,
      name: '',
      isQuerySavingPromptVisible: false,
      saveLoader: false
    }
  },
  watch: {
    vizInputFocus(newValue) {
      if (newValue) {
        this.$nextTick(() => this.$refs.savingDialogVizElement.inputFocus())
      }
    },
    isVizSaved(newValue) {
      if (newValue) {
        this.saveLoader = false
      }
    },
    showPrivateViz(newValue) {
      if (newValue) {
        this.getDataVisualization(this.privateVisualizations);
      }
    },
    vizId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.vizSaveID = newValue
      }
    },
    userSaveViz(newValue) {
      this.user = newValue<commit_msg>include zoom in visualizations<commit_after><template>
  <div
    v-if="items"
    class="gobierto-data-sql-editor"
  >
    <div class="pure-g">
      <div class="pure-u-1 pure-u-lg-4-4">
        <SavingDialog
          ref="savingDialogVizElement"
          :value="name"
          :placeholder="labelVisName"
          :label-saved="labelSavedVisualization"
          :label-modified="labelModifiedVizualition"
          :is-viz-saving-prompt-visible="isVizSavingPromptVisible"
          :is-viz-modified="isVizModified"
          :is-viz-saved="isVizSaved"
          :is-viz-item-modified="isVizItemModified"
          :is-user-logged="isUserLogged"
          :enabled-fork-viz-button="enabledForkVizButton"
          :enabled-viz-saved-button="enabledVizSavedButton"
          :is-query-saving-prompt-visible="isQuerySavingPromptVisible"
          :show-private-public-icon-viz="showPrivatePublicIconViz"
          :show-private-viz="showPrivateViz"
          :show-label-edit="showLabelEdit"
          :reset-private="resetPrivate"
          @save="onSaveEventHandler"
          @keyDownInput="updateVizName"
          @handlerFork="handlerForkViz"
          @isPrivateChecked="isPrivateChecked"
          @showToggleConfig="showPromptSaveViz"
          @handlerRevertViz="hidePromptSaveViz"
        />
      </div>
      <div
        v-if="queryName"
        class="gobierto-data-visualization-query-container"
      >
        <span class="gobierto-data-summary-queries-panel-title">{{ labelQuery }}:</span>
        <router-link
          :to="`/datos/${$route.params.id}/q/${queryID}`"
          class="gobierto-data-summary-queries-container-name"
        >
          {{ queryName }}
        </router-link>
      </div>
    </div>
    <div class="gobierto-data-visualization--aspect-ratio-16-9">
      <template v-if="saveLoader">
        <Loading />
      </template>
      <template v-else>
        <Visualizations
          v-if="items"
          ref="viewer"
          class="gobierto-data-visualization--item"
          :items="items"
          :config="config"
          :object-columns="objectColumns"
          :config-map="configMapZoom"
          @showSaving="showSavingDialog"
        />
      </template>
    </div>
  </div>
</template>
<script>
import { Loading } from "lib/vue/components";
import Visualizations from "./../commons/Visualizations.vue";
import SavingDialog from "./../commons/SavingDialog.vue";
import { getUserId } from "./../../../lib/helpers";

export default {
  name: "VisualizationsItem",
  components: {
    Visualizations,
    SavingDialog,
    Loading
  },
  props: {
    datasetId: {
      type: Number,
      required: true
    },
    isUserLogged: {
      type: Boolean,
      default: false
    },
    privateVisualizations: {
      type: Array,
      default: () => []
    },
    publicVisualizations: {
      type: Array,
      default: () => []
    },
    privateQueries: {
      type: Array,
      default: () => []
    },
    publicQueries: {
      type: Array,
      default: () => []
    },
    isVizModified: {
      type: Boolean,
      default: false
    },
    isVizSaved: {
      type: Boolean,
      default: false
    },
    isVizSavingPromptVisible: {
      type: Boolean,
      default: false
    },
    enabledVizSavedButton: {
      type: Boolean,
      default: false
    },
    enabledForkVizButton: {
      type: Boolean,
      default: true
    },
    vizInputFocus: {
      type: Boolean,
      default: false
    },
    showPrivatePublicIconViz: {
      type: Boolean,
      default: false
    },
    showPrivateViz: {
      type: Boolean,
      default: false
    },
    showPrivate: {
      type: Boolean,
      default: false
    },
    showLabelEdit: {
      type: Boolean,
      default: false
    },
    isVizItemModified: {
      type: Boolean,
      default: false
    },
    resetPrivate: {
      type: Boolean,
      default: false
    },
    vizId: {
      type: Number,
      default: 0
    },
    userSaveViz: {
      type: Number,
      default: 0
    },
    objectColumns: {
      type: Object,
      default: () => {}
    },
    configMap: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      labelVisName: I18n.t('gobierto_data.projects.visName') || "",
      labelVisualize: I18n.t('gobierto_data.projects.visualize') || "",
      labelDashboard: I18n.t('gobierto_data.projects.dashboards') || "",
      labelSavedVisualization: I18n.t("gobierto_data.projects.savedVisualization") || "",
      labelModifiedVizualition: I18n.t("gobierto_data.projects.modifiedVisualization") || "",
      labelQuery: I18n.t("gobierto_data.projects.query") || "",
      items: null,
      config: {},
      vizSaveID: null,
      queryID: '',
      queryName: '',
      user: null,
      queryViz: '',
      isVizElementSavingVisible: false,
      name: '',
      isQuerySavingPromptVisible: false,
      saveLoader: false,
      configMapZoom: { ...this.configMap, zoom: true }
    }
  },
  watch: {
    vizInputFocus(newValue) {
      if (newValue) {
        this.$nextTick(() => this.$refs.savingDialogVizElement.inputFocus())
      }
    },
    isVizSaved(newValue) {
      if (newValue) {
        this.saveLoader = false
      }
    },
    showPrivateViz(newValue) {
      if (newValue) {
        this.getDataVisualization(this.privateVisualizations);
      }
    },
    vizId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.vizSaveID = newValue
      }
    },
    userSaveViz(newValue) {
      this.user = newValue
{'fraction_non_alphanumeric': 0.13786848072562358, 'fraction_numerical': 0.0036281179138321997, 'mean_word_length': 2.146689497716895, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 65, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6442106', 'n_tokens_mistral': 3556, 'n_tokens_neox': 3519, 'n_words': 516}