charts

frontend/src/components/panels/PropertiesPanel.vue

@@ -15,6 +15,7 @@ import type {
   CheckboxElement,
   CalculatedTextElement,
   RichTextElement,
+  ChartElement,
 } from '../../core/types'
 import PositioningProperties from '../properties/PositioningProperties.vue'
 import SizeProperties from '../properties/SizeProperties.vue'
@@ -30,6 +31,7 @@ import CalculatedTextProperties from '../properties/CalculatedTextProperties.vue
 import RichTextProperties from '../properties/RichTextProperties.vue'
 import ContainerProperties from '../properties/ContainerProperties.vue'
 import RepeatingTableProperties from '../properties/RepeatingTableProperties.vue'
+import ChartProperties from '../properties/ChartProperties.vue'
 import '../../styles/properties.css'
 
 const templateStore = useTemplateStore()
@@ -62,6 +64,7 @@ const elementTypeLabel = computed(() => {
     case 'calculated_text': return 'Hesaplanan Metin'
     case 'rich_text': return 'Zengin Metin'
     case 'page_break': return 'Sayfa Sonu'
+    case 'chart': return 'Grafik'
     default: return 'Eleman'
   }
 })
@@ -160,6 +163,10 @@ function deleteElement() {
           v-if="selectedElement.type === 'repeating_table'"
           :element="(selectedElement as RepeatingTableElement)" />
 
+        <ChartProperties
+          v-if="selectedElement.type === 'chart'"
+          :element="(selectedElement as ChartElement)" />
+
         <!-- Header/Footer toggles for root element -->
         <div v-if="selectedElement.id === 'root'" class="prop-section">
           <div class="prop-section__title">Sayfa Ust/Alt Bilgi</div>

frontend/src/components/panels/ToolboxPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEditorStore } from '../../stores/editor'
 import { useSchemaStore } from '../../stores/schema'
-import type { TemplateElement, RepeatingTableElement, TableColumn, ImageElement, PageNumberElement, BarcodeElement, PageBreakElement, CurrentDateElement, ShapeElement, CheckboxElement, CalculatedTextElement, RichTextElement } from '../../core/types'
+import type { TemplateElement, RepeatingTableElement, TableColumn, ImageElement, PageNumberElement, BarcodeElement, PageBreakElement, CurrentDateElement, ShapeElement, CheckboxElement, CalculatedTextElement, RichTextElement, ChartElement } from '../../core/types'
 import { sz } from '../../core/types'
 import { schemaFormatToFormatType, defaultAlignForSchema } from '../../core/schema-parser'
 
@@ -199,6 +199,38 @@ const tools: ToolItem[] = [
       format: 'DD.MM.YYYY',
     }),
   },
+  {
+    label: 'Grafik',
+    icon: '◩',
+    create: (): ChartElement => {
+      const arrays = schemaStore.arrayFields
+      const firstArray = arrays[0]
+      let dataPath = ''
+      let categoryField = ''
+      let valueField = ''
+
+      if (firstArray) {
+        dataPath = firstArray.path
+        const itemFields = schemaStore.getArrayItemFields(firstArray.path)
+        const stringField = itemFields.find(f => f.type === 'string')
+        const numberField = itemFields.find(f => f.type === 'number' || f.type === 'integer')
+        categoryField = stringField?.key ?? itemFields[0]?.key ?? ''
+        valueField = numberField?.key ?? itemFields[1]?.key ?? ''
+      }
+
+      return {
+        id: nextId('chart'),
+        type: 'chart',
+        position: { type: 'flow' },
+        size: { width: sz.fr(1), height: sz.fixed(80) },
+        chartType: 'bar',
+        dataSource: { type: 'array', path: dataPath },
+        categoryField,
+        valueField,
+        style: {},
+      }
+    },
+  },
   {
     label: 'Sayfa Sonu',
     icon: '⏎',