vue-data-ui 2.0.40 → 2.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -0
- package/dist/{index-89a4adc5.js → index-4662eb73.js} +14099 -13426
- package/dist/{index.es-49adcaf0.js → index.es-5b1e9482.js} +1 -1
- package/dist/style.css +1 -1
- package/dist/vue-data-ui.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -157,8 +157,53 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
|
|
|
157
157
|
|
|
158
158
|
# Slots
|
|
159
159
|
|
|
160
|
+
## #svg slot
|
|
161
|
+
|
|
160
162
|
Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
|
|
161
163
|
|
|
164
|
+
```
|
|
165
|
+
<VueUiXy :dataset="dataset" :config="config">
|
|
166
|
+
<template #svg="{ svg }">
|
|
167
|
+
<foreignObject x="100" y="0" height="100" width="150">
|
|
168
|
+
<div>
|
|
169
|
+
This is a custom caption
|
|
170
|
+
</div>
|
|
171
|
+
</foreignObject>
|
|
172
|
+
</template>
|
|
173
|
+
</VueUiXy>
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
The svg slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
178
|
+
|
|
179
|
+
## #legend slot (since v.2.0.41)
|
|
180
|
+
|
|
181
|
+
All charts expose a #legend slot except for:
|
|
182
|
+
|
|
183
|
+
- VueUiWheel
|
|
184
|
+
- VueUiTiremarks
|
|
185
|
+
- VueUiHeatmap
|
|
186
|
+
- VueUiRelationCircle
|
|
187
|
+
- VueUiThermometer
|
|
188
|
+
- VueUiSparkline
|
|
189
|
+
- VueUiSparkbar
|
|
190
|
+
- VueUiSparkStackbar
|
|
191
|
+
- VueUiSparkgauge
|
|
192
|
+
- VueUiSparkHistogram
|
|
193
|
+
|
|
194
|
+
The legend slot also works when using the VueDataUi universal component, if the component it wraps supports it.
|
|
195
|
+
It is recommended to set the show legend config attribute to false, to hide the default legend.
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
<VueUiDonut :config="config" :dataset="dataset">
|
|
199
|
+
<template #legend="{ legend }">
|
|
200
|
+
<div v-for="item in legend">
|
|
201
|
+
{{ legend.name }}
|
|
202
|
+
</div>
|
|
203
|
+
</template>
|
|
204
|
+
</VueUiDonut>
|
|
205
|
+
```
|
|
206
|
+
|
|
162
207
|
# Config
|
|
163
208
|
|
|
164
209
|
If for some reason you can't access the documentation website and need to get the default config object for a component:
|