index.ts (3810B)
1 import { definePanel } from '@directus/extensions-sdk'; 2 import PanelComponent from './panel.vue'; 3 4 export default definePanel({ 5 id: 'panel-pie-chart', 6 name: 'Pie Chart', 7 icon: 'pie_chart', 8 description: 'Generate a pie chart from a label and value field', 9 component: PanelComponent, 10 options: [ 11 { 12 field: 'collection', 13 type: 'string', 14 name: '$t:collection', 15 meta: { 16 interface: 'system-collection', 17 required: true, 18 options: { 19 includeSystem: true, 20 includeSingleton: false, 21 placeholder: '$t:select_a_collection', 22 }, 23 width: 'full', 24 }, 25 }, 26 { 27 field: 'filter', 28 type: 'json', 29 name: '$t:filter', 30 meta: { 31 interface: 'system-filter', 32 options: { 33 collectionField: 'collection', 34 relationalFieldSelectable: true, 35 }, 36 }, 37 }, 38 { 39 field: 'dataValues', 40 type: 'string', 41 name: '$t:panels.time_series.value_field', 42 meta: { 43 interface: 'system-field', 44 required: true, 45 options: { 46 collectionField: 'collection', 47 placeholder: '$t:select_a_field', 48 typeAllowList: ['integer', 'bigInteger', 'float', 'decimal'], 49 }, 50 width: 'half', 51 }, 52 }, 53 { 54 field: 'dataLabels', 55 type: 'string', 56 name: '$t:displays.labels.labels', 57 meta: { 58 interface: 'system-field', 59 required: true, 60 options: { 61 collectionField: 'collection', 62 placeholder: '$t:select_a_field', 63 allowPrimaryKey: true, 64 }, 65 width: 'half', 66 }, 67 }, 68 { 69 field: 'labelGrouping', 70 type: 'string', 71 name: '$t:group_aggregation', 72 meta: { 73 interface: 'select-dropdown', 74 options: { 75 choices: [ 76 { 77 value: 'sum', 78 text: '$t:sum', 79 }, 80 { 81 value: 'count', 82 text: '$t:count', 83 }, 84 { 85 value: 'avg', 86 text: '$t:avg', 87 }, 88 { 89 value: 'max', 90 text: '$t:max', 91 }, 92 { 93 value: 'min', 94 text: '$t:min', 95 }, 96 ], 97 }, 98 width: 'half', 99 }, 100 schema: { 101 default_value: 'sum', 102 }, 103 }, 104 { 105 field: 'sortDirection', 106 type: 'string', 107 name: '$t:sort_direction', 108 meta: { 109 interface: 'select-dropdown', 110 options: { 111 choices: [ 112 { 113 value: 'desc', 114 text: '$t:sort_desc', 115 }, 116 { 117 value: 'asc', 118 text: '$t:sort_asc', 119 }, 120 ], 121 }, 122 required: false, 123 width: 'half', 124 }, 125 schema: { 126 default_value: 'desc', 127 }, 128 }, 129 { 130 field: 'colors', 131 type: 'json', 132 name: 'Label Colors', 133 meta: { 134 interface: 'list', 135 options: { 136 template: '{{ label }}: {{ color }}', 137 fields: [ 138 { 139 field: 'label', 140 type: 'string', 141 name: 'Label', 142 meta: { 143 interface: 'input', 144 width: 'half', 145 }, 146 }, 147 { 148 field: 'color', 149 type: 'string', 150 name: 'Color', 151 meta: { 152 interface: 'select-color', 153 width: 'half', 154 }, 155 }, 156 ], 157 }, 158 }, 159 }, 160 { 161 field: 'showLegend', 162 name: '$t:panels.pie_chart.show_legend', 163 type: 'boolean', 164 schema: { 165 default_value: true, 166 }, 167 meta: { 168 interface: 'boolean', 169 width: 'half', 170 }, 171 }, 172 { 173 field: 'legendPosition', 174 type: 'string', 175 name: 'Legend Position', 176 meta: { 177 interface: 'select-dropdown', 178 options: { 179 choices: [ 180 { 181 value: 'bottom', 182 text: 'Bottom', 183 }, 184 { 185 value: 'right', 186 text: 'Right', 187 }, 188 { 189 value: 'left', 190 text: 'Left', 191 }, 192 ], 193 }, 194 width: 'half', 195 }, 196 schema: { 197 default_value: 'bottom', 198 }, 199 }, 200 { 201 field: 'showDataLabel', 202 name: '$t:show_data_label', 203 type: 'boolean', 204 schema: { 205 default_value: true, 206 }, 207 meta: { 208 interface: 'boolean', 209 width: 'half', 210 }, 211 }, 212 ], 213 minWidth: 12, 214 minHeight: 8, 215 });