@politicalwatch/tipi-uikit 1.9.10 → 1.9.12

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/CSVDownload/CSVDownload.vue +35 -6
  3. package/src/components/Charts/d3.chart.vue +57 -63
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@politicalwatch/tipi-uikit",
3
- "version": "1.9.10",
3
+ "version": "1.9.12",
4
4
  "main": "src/components/index.js",
5
5
  "scripts": {
6
6
  "dev": "vite",
package/src/components/CSVDownload/CSVDownload.vue CHANGED
@@ -32,6 +32,8 @@
32
32
  v-else
33
33
  :data="csvItems"
34
34
  :fields="csvFields"
35
+ :escapeCsv="false"
36
+ :meta="json_meta"
35
37
  :name="getNameFromCSV()"
36
38
  id="downloadCSV"
37
39
  type="csv"
@@ -73,14 +75,32 @@ const props = defineProps({
73
75
  csvFields: {
74
76
  type: Object,
75
77
  default: () => ({
76
- title: 'title',
78
+ title: {
79
+ field: 'title',
80
+ callback: (value) => `"${value.replace(/\n/g, ' ')}"`,
81
+ },
77
82
  reference: 'reference',
78
83
  initiative_type_alt: 'initiative_type_alt',
79
- authors: 'authors',
80
- deputies: 'deputies',
81
- topics: 'topics',
82
- tags: 'tags',
83
- place: 'place',
84
+ authors: {
85
+ field: 'authors',
86
+ callback: (value) => `"${value.join('; ').replace(/\n/g, ' ')}"`,
87
+ },
88
+ deputies: {
89
+ field: 'deputies',
90
+ callback: (value) => `"${value.join('; ').replace(/\n/g, ' ')}"`,
91
+ },
92
+ topics: {
93
+ field: 'topics',
94
+ callback: (value) => `"${value.replace(/\n/g, ' ')}"`,
95
+ },
96
+ tags: {
97
+ field: 'tags',
98
+ callback: (value) => `"${value.replace(/\n/g, ' ')}"`,
99
+ },
100
+ place: {
101
+ field: 'place',
102
+ callback: (value) => `"${value.replace(/\n/g, ' ')}"`,
103
+ },
84
104
  status: 'status',
85
105
  created: 'created',
86
106
  updated: 'updated',
@@ -100,6 +120,15 @@ const { initiatives, csvItems, canDownloadCSV, csvFields, label, buttonClass } =
100
120
 
101
121
  const emit = defineEmits(['loadCSVItems']);
102
122
 
123
+ const json_meta = [
124
+ [
125
+ {
126
+ key: 'charset',
127
+ value: 'utf-8',
128
+ },
129
+ ],
130
+ ];
131
+
103
132
  const loadCSVItems = (event) => {
104
133
  emit('loadCSVItems', event);
105
134
  };
package/src/components/Charts/d3.chart.vue CHANGED
@@ -9,77 +9,71 @@
9
9
  </div>
10
10
  </template>
11
11
 
12
- <script setup>
13
- import { ref, watch, onBeforeUnmount } from 'vue';
12
+ <script>
14
13
  import { saveSvgAsPng } from 'save-svg-as-png';
15
14
 
16
- const chart = ref(null);
17
-
18
- const props = defineProps({
19
- config: {
20
- type: Object,
21
- required: true,
22
- default: () => ({}),
23
- },
24
- datum: {
25
- type: Array,
26
- required: true,
27
- default: () => [],
15
+ export default {
16
+ name: 'D3Chart',
17
+ data() {
18
+ return {
19
+ chart: {},
20
+ };
28
21
  },
29
- title: {
30
- type: String,
31
- default: '',
22
+ props: {
23
+ config: {
24
+ type: Object,
25
+ required: true,
26
+ default: () => ({}),
27
+ },
28
+ datum: {
29
+ type: Array,
30
+ required: true,
31
+ default: () => [],
32
+ },
33
+ title: {
34
+ type: String,
35
+ default: '',
36
+ },
37
+ source: {
38
+ type: String,
39
+ default: '',
40
+ },
41
+ height: {
42
+ type: Number,
43
+ default: 300,
44
+ },
45
+ download: {
46
+ type: String,
47
+ },
32
48
  },
33
- source: {
34
- type: String,
35
- default: '',
49
+ methods: {
50
+ downloadSVG() {
51
+ const node = this.$refs.chart.getElementsByClassName('chart')[0];
52
+ saveSvgAsPng(node, 'chart.png', {
53
+ backgroundColor: '#FFF',
54
+ });
55
+ },
36
56
  },
37
- height: {
38
- type: Number,
39
- default: 300,
57
+ watch: {
58
+ config: {
59
+ handler(val) {
60
+ this.chart.updateConfig(val);
61
+ },
62
+ deep: true,
63
+ },
64
+ datum(vals) {
65
+ this.chart.updateData([...vals]);
66
+ },
67
+ height(val) {
68
+ setTimeout(() => {
69
+ this.chart.resizeChart();
70
+ }, 10);
71
+ },
40
72
  },
41
- download: {
42
- type: String,
73
+ beforeDestroy() {
74
+ this.chart.destroyChart();
43
75
  },
44
- });
45
-
46
- const { config, datum, title, source, height, download } = toRefs(props);
47
-
48
- const downloadSVG = () => {
49
- const node = chart.value.getElementsByClassName('chart')[0];
50
- saveSvgAsPng(node, 'chart.png', {
51
- backgroundColor: '#FFF',
52
- });
53
76
  };
54
-
55
- watch(
56
- () => config.value,
57
- (val) => {
58
- chart.value.updateConfig(val);
59
- },
60
- { deep: true }
61
- );
62
-
63
- watch(
64
- () => datum.value,
65
- (vals) => {
66
- chart.value.updateData([...vals]);
67
- },
68
- { deep: true }
69
- );
70
-
71
- watch(
72
- () => height.value,
73
- (val) => {
74
- setTimeout(() => {
75
- chart.value.resizeChart();
76
- }, 10);
77
- }
78
- );
79
-
80
- onBeforeUnmount(() => {
81
- chart.value.destroyChart();
82
- });
83
77
  </script>
84
78
 
85
79
  <style lang="scss">