feat: add graph pane type and corresponding demo component

docs/.vitepress/config.ts

@@ -41,6 +41,7 @@ export default defineConfig({
           { text: 'Select', link: '/controls/index.html#select' },
           { text: 'Vector', link: '/controls/index.html#vector' },
           { text: 'Button', link: '/controls/index.html#button' },
+          { text: 'Graph', link: '/controls/index.html#graph' },
         ],
       },
       {

docs/.vitepress/theme/components/GraphDemo.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { TresLeches, useControls } from '@tresjs/leches'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const wave = ref(0)
+const uuid = 'graph-demo'
+
+useControls({
+  sine: {
+    type: 'graph',
+    label: 'Sine Wave',
+    value: wave,
+  },
+}, {
+  uuid,
+})
+
+// Parameters for the sine wave
+const amplitude = 50 // Height of the wave
+const frequency = 2 // Speed of the wave (increased from 0.1)
+let time = 0
+let intervalId: number | null = null
+
+// Function to update the sine wave value
+function updateSineWave() {
+  // Calculate sine value based on time
+  wave.value = amplitude * Math.sin(time * frequency)
+  time += 0.1
+}
+
+onMounted(() => {
+  // Start the sine wave animation
+  intervalId = setInterval(updateSineWave, 100) as unknown as number
+})
+
+onUnmounted(() => {
+  // Clean up interval when component is destroyed
+  if (intervalId !== null) {
+    clearInterval(intervalId)
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-300px bg-gray-200 dark:bg-dark-800 mb-8 relative flex justify-center items-center">
+    <TresLeches
+      :uuid="uuid"
+    />
+    {{ wave }}
+  </div>
+</template>

docs/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -12,10 +13,12 @@ declare module 'vue' {
     ButtonSizesDemo: typeof import('./.vitepress/theme/components/ButtonSizesDemo.vue')['default']
     ButtonVariantDemo: typeof import('./.vitepress/theme/components/ButtonVariantDemo.vue')['default']
     ColorDemo: typeof import('./.vitepress/theme/components/ColorDemo.vue')['default']
+    copy: typeof import('./.vitepress/theme/components/FPSDemo copy.vue')['default']
     DemoLayout: typeof import('./.vitepress/theme/components/DemoLayout.vue')['default']
     FolderDemo: typeof import('./.vitepress/theme/components/FolderDemo.vue')['default']
     FPSDemo: typeof import('./.vitepress/theme/components/FPSDemo.vue')['default']
     GettingStartedDemo: typeof import('./.vitepress/theme/components/GettingStartedDemo.vue')['default']
+    GraphDemo: typeof import('./.vitepress/theme/components/GraphDemo.vue')['default']
     HeroDemo: typeof import('./.vitepress/theme/components/HeroDemo.vue')['default']
     IconDemo: typeof import('./.vitepress/theme/components/IconDemo.vue')['default']
     MultipleControlDemo: typeof import('./.vitepress/theme/components/MultipleControlDemo.vue')['default']

docs/controls/index.md

@@ -152,3 +152,20 @@ useControls({
 ```
 
 <ButtonSizesDemo/>
+
+## Graph
+
+For visualizing numeric values over time, you can use the graph control type. This will create a real-time graph that updates as the value changes.
+
+```ts
+const { wave } = useSineWave()
+
+useControls({
+  renderTimes: {
+    value: wave,
+    type: 'graph'
+  }
+})
+```
+
+<GraphDemo/>

package.json

@@ -59,46 +59,46 @@
     "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@unocss/core": "^65.4.3",
-    "@vueuse/components": "^12.5.0",
-    "@vueuse/motion": "^2.2.6",
-    "unocss-preset-scrollbar": "^0.3.1"
+    "@unocss/core": "66.1.0-beta.7",
+    "@vueuse/components": "^13.0.0",
+    "@vueuse/motion": "^3.0.3",
+    "unocss-preset-scrollbar": "^3.2.0"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.17",
+    "@histoire/plugin-vue": "1.0.0-alpha.2",
     "@iconify-json/ic": "^1.2.2",
-    "@iconify/json": "^2.2.299",
+    "@iconify/json": "^2.2.320",
     "@release-it/conventional-changelog": "^10.0.0",
     "@tresjs/eslint-config": "^1.4.0",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/browser": "^3.0.4",
-    "@vitest/ui": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/ui": "^3.0.9",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.5.0",
-    "@vueuse/shared": "^12.5.0",
-    "eslint": "^9.19.0",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/shared": "^13.0.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-vitest-globals": "^1.5.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "histoire": "^0.17.17",
+    "eslint-plugin-vue": "^10.0.0",
+    "histoire": "1.0.0-alpha.2",
     "kolorist": "^1.8.0",
-    "pathe": "^2.0.2",
+    "pathe": "^2.0.3",
     "release-it": "^18.1.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.14.0",
-    "typescript": "^5.7.3",
-    "unocss": "^65.4.3",
-    "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.11",
+    "typescript": "^5.8.2",
+    "unocss": "66.1.0-beta.7",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^6.2.3",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-dts": "^4.5.3",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "1.6.3",
-    "vitest": "^3.0.4",
+    "vitest": "^3.0.9",
     "vue": "^3.5.13",
-    "webdriverio": "^9.7.1"
+    "webdriverio": "^9.12.1"
   }
 }

playground/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

playground/src/pages/controls/GraphDemo.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+
+const renderTimes = ref(0)
+
+/* useControls({
+  renderTimes: {
+    value: renderTimes,
+    type: 'graph',
+    label: 'Render Times (ms)',
+    onUpdate: () => {
+      renderTimes.value = 0
+    },
+  },
+}) */
+
+const wave = ref(0)
+
+useControls({
+  sine: {
+    type: 'graph',
+    label: 'Sine Wave',
+    value: wave,
+  },
+})
+
+// Parameters for the sine wave
+const amplitude = 50 // Height of the wave
+const frequency = 2 // Speed of the wave (increased from 0.1)
+let time = 0
+let intervalId: number | null = null
+
+// Function to update the sine wave value
+function updateSineWave() {
+  // Calculate sine value based on time
+  wave.value = amplitude * Math.sin(time * frequency)
+  time += 0.1
+}
+
+onMounted(() => {
+  // Start the sine wave animation
+  intervalId = setInterval(updateSineWave, 100) as unknown as number
+})
+
+onUnmounted(() => {
+  // Clean up interval when component is destroyed
+  if (intervalId !== null) {
+    clearInterval(intervalId)
+  }
+})
+
+function onRender() {
+  renderTimes.value = 1
+}
+
+/* setInterval(() => {
+  renderTimes.value++
+}, 100) */
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas render-mode="on-demand" @render="onRender">
+    <TresPerspectiveCamera
+      :position="[4, 4, 4]"
+    />
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 128, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>

playground/src/router/routes/controls.ts

@@ -39,4 +39,9 @@ export const controlsRoutes = [
     name: 'Button Control',
     component: () => import('../../pages/controls/ButtonControlDemo.vue'),
   },
+  {
+    path: '/controls/graph',
+    name: 'Graph Control',
+    component: () => import('../../pages/controls/GraphDemo.vue'),
+  },
 ]