Merge pull request #58 from vue-pivottable/plotly-renderer

feat: Plotly 차트 렌더러 추가 #57

Author: Seungwoo321

package-lock.json

@@ -58,6 +58,8 @@
     "vue-draggable-next": "^2.2.1"
   },
   "devDependencies": {
+    "@vue-pivottable/lazy-table-renderer": "workspace:*",
+    "@vue-pivottable/plotly-renderer": "workspace:*",
     "@eslint/js": "^9.21.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue-pivottable/lazy-table-renderer": "workspace:*",

package.json

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 vue-pivottable
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plotly-renderer/LICENSE

@@ -0,0 +1,52 @@
+{
+  "name": "@vue-pivottable/plotly-renderer",
+  "version": "1.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/plotly-renderer.es.js",
+      "require": "./dist/plotly-renderer.umd.js"
+    },
+    "./dist/plotly-renderer.css": "./dist/plotly-renderer.css"
+  },
+  "main": "./dist/plotly-renderer.umd.js",
+  "module": "./dist/plotly-renderer.es.js",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-pivottable/vue3-pivottable.git",
+    "directory": "packages/plotly-renderer"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "pivot",
+    "pivottable",
+    "vue-pivottable",
+    "vue3-pivottable",
+    "@vue-pivottable/plotly-renderer"
+  ],
+  "homepage": "https://github.com/vue-pivottable/vue3-pivottable/tree/main/packages/plotly-renderer",
+  "author": "Sumin, Lee <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@clalarco/vue3-plotly": "^0.1.5",
+    "plotly.js-basic-dist": "^3.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "vue-pivottable": "^1.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "vue-pivottable": "workspace:*",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.1.0"
+  }
+}

packages/plotly-renderer/README.md

@@ -0,0 +1,56 @@
+<template>
+  <VuePlotly
+    :data="chartData"
+    :layout="layout"
+  />
+</template>
+
+<script setup>
+import { VuePlotly } from '@clalarco/vue3-plotly'
+import { useProvidePivotData } from 'vue-pivottable'
+import { useChartData } from '../composables/useChartData'
+
+const props = defineProps({
+  traceOptions: {
+    type: Object,
+    required: true
+  },
+  layoutOptions: {
+    type: Object,
+    required: true
+  },
+  transpose: {
+    type: Boolean,
+    required: true
+  },
+  aggregatorName: {
+    type: String,
+    required: true
+  },
+  aggregators: {
+    type: Object,
+    required: true
+  },
+  rows: {
+    type: Array,
+    required: true
+  },
+  cols: {
+    type: Array,
+    required: true
+  },
+  vals: {
+    type: Array,
+    required: true
+  }
+})
+
+const { rowKeys, colKeys, getAggregator } = useProvidePivotData()
+
+const { chartData, layout } = useChartData(
+  props,
+  rowKeys,
+  colKeys,
+  getAggregator
+)
+</script>

packages/plotly-renderer/package.json

@@ -0,0 +1,56 @@
+<template>
+  <VuePlotly
+    :data="chartData"
+    :layout="layout"
+  />
+</template>
+
+<script setup>
+import { VuePlotly } from '@clalarco/vue3-plotly'
+import { useProvidePivotData } from 'vue-pivottable'
+import { useScatterChartData } from '../composables/useScatterChartData'
+
+const props = defineProps({
+  traceOptions: {
+    type: Object,
+    required: true
+  },
+  layoutOptions: {
+    type: Object,
+    required: true
+  },
+  transpose: {
+    type: Boolean,
+    required: true
+  },
+  aggregatorName: {
+    type: String,
+    required: true
+  },
+  aggregators: {
+    type: Object,
+    required: true
+  },
+  rows: {
+    type: Array,
+    required: true
+  },
+  cols: {
+    type: Array,
+    required: true
+  },
+  vals: {
+    type: Array,
+    required: true
+  }
+})
+
+const { rowKeys, colKeys, getAggregator } = useProvidePivotData()
+
+const { chartData, layout } = useScatterChartData(
+  props,
+  rowKeys,
+  colKeys,
+  getAggregator
+)
+</script>

packages/plotly-renderer/src/components/PlotlyChart.vue

@@ -0,0 +1,119 @@
+import { computed } from 'vue'
+
+export function useChartData(props, rowKeys, colKeys, getAggregator) {
+  const traceKeys = computed(() => {
+    const keys = props.transpose ? colKeys.value : rowKeys.value
+    return keys.length > 0 ? keys : [[]]
+  })
+  const datumKeys = computed(() => {
+    const keys = props.transpose ? rowKeys.value : colKeys.value
+    return keys.length > 0 ? keys : [[]]
+  })
+
+  const fullAggName = computed(() => {
+    const baseName = props.aggregatorName
+    const numInputs = props.aggregators[baseName]([])().numInputs || 0
+    if (numInputs !== 0) {
+      const valsSlice = props.vals.slice(0, numInputs).join(', ')
+      return `${baseName} of ${valsSlice}`
+    }
+
+    return baseName
+  })
+
+  const chartData = computed(() =>
+    traceKeys.value.map((traceKey) => {
+      const values = []
+      const labels = []
+      for (const datumKey of datumKeys.value) {
+        const val = parseFloat(
+          getAggregator(
+            props.transpose ? datumKey : traceKey,
+            props.transpose ? traceKey : datumKey
+          ).value()
+        )
+        values.push(isFinite(val) ? val : null)
+        labels.push(datumKey.join('-') || ' ')
+      }
+
+      const trace = {
+        name: traceKey.join('-') || fullAggName.value,
+        ...props.traceOptions
+      }
+
+      if (props.traceOptions.type === 'pie') {
+        trace.values = values
+        trace.labels = labels.length > 1 ? labels : [fullAggName.value]
+      } else {
+        trace.x = props.transpose ? values : labels
+        trace.y = props.transpose ? labels : values
+      }
+
+      return trace
+    })
+  )
+
+  const titleText = computed(() => {
+    let title = fullAggName.value
+
+    const hAxisTitle = props.transpose.value
+      ? props.rows.join('-')
+      : props.cols.join('-')
+
+    const groupByTitle = props.transpose.value
+      ? props.cols.join('-')
+      : props.rows.join('-')
+
+    if (hAxisTitle !== '') title += ` vs ${hAxisTitle}`
+    if (groupByTitle !== '') title += ` by ${groupByTitle}`
+
+    return title
+  })
+
+  const layout = computed(() => {
+    const baseLayout = {
+      title: titleText.value,
+      hovermode: 'closest',
+      width: window.innerWidth / 1.5,
+      height: window.innerHeight / 1.4 - 50
+    }
+
+    if (props.traceOptions.type === 'pie') {
+      const columns = Math.ceil(Math.sqrt(chartData.value.length))
+      const rows = Math.ceil(chartData.value.length / columns)
+      baseLayout.grid = { columns, rows }
+
+      chartData.value.forEach((d, i) => {
+        d.domain = {
+          row: Math.floor(i / columns),
+          column: i - columns * Math.floor(i / columns)
+        }
+        if (chartData.value.length > 1) d.title = d.name
+      })
+
+      if (chartData.value[0].labels?.length === 1) {
+        baseLayout.showlegend = false
+      }
+    } else {
+      baseLayout.xaxis = {
+        title: props.transpose ? fullAggName.value : null,
+        automargin: true
+      }
+      baseLayout.yaxis = {
+        title: props.transpose ? null : fullAggName.value,
+        automargin: true
+      }
+    }
+
+    return {
+      ...baseLayout,
+      ...props.layoutOptions,
+      ...props.plotlyOptions
+    }
+  })
+
+  return {
+    chartData,
+    layout
+  }
+}

packages/plotly-renderer/src/components/PlotlyScatterChart.vue

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+
+export function useScatterChartData(props, rowKeys, colKeys, getAggregator) {
+  const scatterRowKeys = computed(() => {
+    return rowKeys.value.length > 0 ? rowKeys.value : [[]]
+  })
+
+  const scatterColKeys = computed(() => {
+    return colKeys.value.length > 0 ? colKeys.value : [[]]
+  })
+
+  const chartData = computed(() => {
+    const data = {
+      x: [],
+      y: [],
+      text: [],
+      type: 'scatter',
+      mode: 'markers'
+    }
+
+    scatterRowKeys.value.forEach((rowKey) => {
+      scatterColKeys.value.forEach((colKey) => {
+        const value = getAggregator(rowKey, colKey).value()
+        if (value != null) {
+          data.x.push(colKey.join('-'))
+          data.y.push(rowKey.join('-'))
+          data.text.push(value)
+        }
+      })
+    })
+
+    return [data]
+  })
+
+  const layout = computed(() => ({
+    title: `${props.rows.join('-')} vs ${props.cols.join('-')}`,
+    hovermode: 'closest',
+    xaxis: {
+      title: props.cols.join('-'),
+      automargin: true
+    },
+    yaxis: {
+      title: props.rows.join('-'),
+      automargin: true
+    },
+    width: window.innerWidth / 1.5,
+    height: window.innerHeight / 1.4 - 50
+  }))
+
+  return {
+    chartData,
+    layout
+  }
+}