Skip to content

Commit db63509

Browse files
graphierosgraphieros
committed
Update docs
1 parent efd7551 commit db63509

File tree

2 files changed

+84
-2
lines changed

2 files changed

+84
-2
lines changed

‎README.md‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ From the dataset you pass into the props, this component will produce the most a
423423
| ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
424424
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
425425
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
426-
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label` | ✅ | ✅ |
426+
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
427427
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
428428
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
429429
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
@@ -848,3 +848,85 @@ List of available patterns:
848848
| squares |
849849
| wave |
850850
| zigzag |
851+
852+
# Utility functions
853+
854+
A set of uility functions is available:
855+
856+
```js
857+
import {
858+
abbreviate,
859+
darkenColor,
860+
lightenColor,
861+
shiftColorHue,
862+
createTSpans,
863+
} from "vue-data-ui";
864+
```
865+
866+
### abreviate
867+
868+
```js
869+
import { abbreviate } from "vue-data-ui";
870+
871+
const text = "lorem ipsum dolor sit amet";
872+
const abbreviated = abbreviate({
873+
source: text,
874+
length: 5,
875+
}); // Result: LIDSA
876+
```
877+
878+
### darkenColor
879+
880+
```js
881+
import { darkenColor } from "vue-data-ui";
882+
883+
const color = "#FF0000";
884+
const darkened = darkenColor(color, 0.5); // Result: #800000ff
885+
```
886+
887+
### lightenColor
888+
889+
```js
890+
import { lightenColor } from "vue-data-ui";
891+
892+
const color = "#FF0000";
893+
const lightened = lightenColor(color, 0.5); // Result: #ff8080ff
894+
```
895+
896+
### shiftColorHue
897+
898+
```js
899+
import { shiftColorHue } from "vue-data-ui";
900+
901+
// Color format can be HEX (with or without alpha channel), RGB, RGBA, or named color
902+
const color = "#FF0000";
903+
const shifted = shiftColorHue(color, 0.1); // Result: #ff9900ff
904+
```
905+
906+
### createTSpans
907+
908+
```js
909+
import { createTSpans } from "vue-data-ui";
910+
911+
const textContent = createTSpans({
912+
content: "This is an example of multiline text",
913+
fontSize: 16,
914+
fill: "#1A1A1A",
915+
maxWords: 3,
916+
x: 10,
917+
y: 20,
918+
});
919+
```
920+
921+
```html
922+
<!-- The output must be used inside a svg text element with `v-html`, for example in a #data-label slot, or in your own svg -->
923+
924+
<text
925+
:x="10"
926+
:y="20"
927+
fill="#1A1A1A"
928+
:font-size="16"
929+
text-anchor="middle"
930+
v-html="textContent"
931+
/>
932+
```

‎documentation/installation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ From the dataset you pass into the props, this component will produce the most a
146146
| ----------------------------- | ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ |
147147
| `VueUiAgePyramid` | `Array<Array<string / number>>` | `VueUiSparklineConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
148148
| `VueUiCandlestick` | `Array<Array<string / number>>` | `VueUiCandlestickConfig` | `generatePdf`, `generateImage`, `generateCsv`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#reset-action`, `#watermark`, `#chart-background` | ✅ | ✅ |
149-
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label` | ✅ | ✅ |
149+
| `VueUiCirclePack` | `VueUiCirclePackDatasetItem[]` | `VueUiCirclePackConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateImage`, `generateCsv`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` , `#pattern`, `#zoom-label`, `#data-label` | ✅ | ✅ |
150150
| `VueUiChestnut` | `VueUiChestnutDatasetRoot[]` | `VueUiChestnutConfig` | `@selectRoot`, `@selectBranch`, `@selectNut`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
151151
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
152152
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |

0 commit comments

Comments
 (0)