@tekkare/auriga 0.2.135 → 0.2.136

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/dist/module.json CHANGED
@@ -4,5 +4,5 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "0.2.135"
7
+ "version": "0.2.136"
8
8
  }
@@ -8,7 +8,7 @@
8
8
  <div v-else class="oip_subtitle">
9
9
  {{ title ? title : "Your map title" }}
10
10
  </div>
11
- <ArgSourceContainer @click="openSource">
11
+ <ArgSourceContainer v-if="source !== null" @click="openSource">
12
12
  {{ source ? source : "Your source" }}
13
13
  </ArgSourceContainer>
14
14
  </div>
@@ -59,7 +59,7 @@
59
59
  />
60
60
  </svg>
61
61
  <div class="legend">
62
- <div class="scale" />
62
+ <div :class="reverseColors ? 'reverse_scale' : 'scale'" />
63
63
  <div class="legend-text">
64
64
  <p v-for="value in scale" :key="value">
65
65
  {{ Math.ceil(value)?.toLocaleString("fr-FR") }}
@@ -108,6 +108,10 @@ export default defineComponent({
108
108
  type: String,
109
109
  default: "en",
110
110
  required: false
111
+ },
112
+ reverseColors: {
113
+ type: Boolean,
114
+ default: false
111
115
  }
112
116
  },
113
117
  emits: ["openSource"],
@@ -119,25 +123,25 @@ export default defineComponent({
119
123
  const scale = ref([]);
120
124
  function getColor(value) {
121
125
  if (!value) return "var(--lightest)";
122
- if (value >= scale.value[9]) {
126
+ if (props.reverseColors ? value <= scale.value[0] : value >= scale.value[9]) {
123
127
  return "#3F1151";
124
- } else if (value >= scale.value[8]) {
128
+ } else if (props.reverseColors ? value <= scale.value[1] : value >= scale.value[8]) {
125
129
  return "#432974";
126
- } else if (value >= scale.value[7]) {
130
+ } else if (props.reverseColors ? value <= scale.value[2] : value >= scale.value[7]) {
127
131
  return "#404A85";
128
- } else if (value >= scale.value[6]) {
132
+ } else if (props.reverseColors ? value <= scale.value[3] : value >= scale.value[6]) {
129
133
  return "#3F668A";
130
- } else if (value >= scale.value[5]) {
134
+ } else if (props.reverseColors ? value <= scale.value[4] : value >= scale.value[5]) {
131
135
  return "#43808C";
132
- } else if (value >= scale.value[4]) {
136
+ } else if (props.reverseColors ? value <= scale.value[5] : value >= scale.value[4]) {
133
137
  return "#4C9C8A";
134
- } else if (value >= scale.value[3]) {
138
+ } else if (props.reverseColors ? value <= scale.value[6] : value >= scale.value[3]) {
135
139
  return "#5FB57E";
136
- } else if (value >= scale.value[2]) {
140
+ } else if (props.reverseColors ? value <= scale.value[7] : value >= scale.value[2]) {
137
141
  return "#85CB68";
138
- } else if (value >= scale.value[1]) {
142
+ } else if (props.reverseColors ? value <= scale.value[8] : value >= scale.value[1]) {
139
143
  return "#BDDD51";
140
- } else if (value >= scale.value[0]) {
144
+ } else if (props.reverseColors ? value > scale.value[8] : value >= scale.value[0]) {
141
145
  return "#F9E855";
142
146
  }
143
147
  }
@@ -152,10 +156,14 @@ export default defineComponent({
152
156
  }
153
157
  function setupScale() {
154
158
  minimalValue.value = Math.floor(
155
- Math.min(...props.data.map((x) => x.value))
159
+ Math.min(
160
+ ...props.data.filter((f) => f.value !== null).map((x) => x.value)
161
+ )
156
162
  );
157
163
  maximalValue.value = Math.ceil(
158
- Math.max(...props.data.map((x) => x.value))
164
+ Math.max(
165
+ ...props.data.filter((f) => f.value !== null).map((x) => x.value)
166
+ )
159
167
  );
160
168
  const step = (maximalValue.value - minimalValue.value) / 10;
161
169
  if (minimalValue.value !== null) {
@@ -228,5 +236,5 @@ export default defineComponent({
228
236
  </script>
229
237
 
230
238
  <style scoped>
231
- .map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:0;min-width:-moz-fit-content;min-width:fit-content;position:absolute;top:0;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855);height:10px;transform:rotate(180deg)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}
239
+ .map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:0;min-width:-moz-fit-content;min-width:fit-content;position:absolute;top:0;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855)}.reverse_scale,.scale{height:10px;transform:rotate(180deg)}.reverse_scale{background:linear-gradient(45deg,#f9e855,#bddd51,#85cb68,#5fb57e,#4c9c8a,#43808c,#3f668a,#404a85,#432974,#3f1151)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}
232
240
  </style>
@@ -34,6 +34,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
34
34
  default: string;
35
35
  required: false;
36
36
  };
37
+ reverseColors: {
38
+ type: BooleanConstructor;
39
+ default: boolean;
40
+ };
37
41
  }>, {
38
42
  getColor: (value?: number) => "var(--lightest)" | "#3F1151" | "#432974" | "#404A85" | "#3F668A" | "#43808C" | "#4C9C8A" | "#5FB57E" | "#85CB68" | "#BDDD51" | "#F9E855" | undefined;
39
43
  handleHover: (region: RegionsDe) => void;
@@ -85,6 +89,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
85
89
  default: string;
86
90
  required: false;
87
91
  };
92
+ reverseColors: {
93
+ type: BooleanConstructor;
94
+ default: boolean;
95
+ };
88
96
  }>> & Readonly<{
89
97
  onOpenSource?: ((...args: any[]) => any) | undefined;
90
98
  }>, {
@@ -94,6 +102,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
94
102
  title: string | null;
95
103
  haveCustomTitle: string | null;
96
104
  uniqueID: string | null;
105
+ reverseColors: boolean;
97
106
  }, {}, {
98
107
  OneRegionDe: any;
99
108
  ArgSourceContainer: any;
@@ -8,7 +8,7 @@
8
8
  <div v-else class="oip_subtitle">
9
9
  {{ title ? title : "Your map title" }}
10
10
  </div>
11
- <ArgSourceContainer @click="openSource">
11
+ <ArgSourceContainer v-if="source !== null" @click="openSource">
12
12
  {{ source ? source : "Your source" }}
13
13
  </ArgSourceContainer>
14
14
  </div>
@@ -83,7 +83,7 @@
83
83
  />
84
84
  </svg>
85
85
  <div class="legend">
86
- <div class="scale" />
86
+ <div :class="reverseColors ? 'reverse_scale' : 'scale'" />
87
87
  <div class="legend-text">
88
88
  <p v-for="value in scale" :key="value">
89
89
  {{ Math.ceil(value)?.toLocaleString("fr-FR") }}
@@ -132,6 +132,10 @@ export default defineComponent({
132
132
  type: String,
133
133
  default: "en",
134
134
  required: false
135
+ },
136
+ reverseColors: {
137
+ type: Boolean,
138
+ default: false
135
139
  }
136
140
  },
137
141
  emits: ["openSource"],
@@ -143,25 +147,25 @@ export default defineComponent({
143
147
  const scale = ref([]);
144
148
  function getColor(value) {
145
149
  if (!value) return "var(--lightest)";
146
- if (value >= scale.value[9]) {
150
+ if (props.reverseColors ? value <= scale.value[0] : value >= scale.value[9]) {
147
151
  return "#3F1151";
148
- } else if (value >= scale.value[8]) {
152
+ } else if (props.reverseColors ? value <= scale.value[1] : value >= scale.value[8]) {
149
153
  return "#432974";
150
- } else if (value >= scale.value[7]) {
154
+ } else if (props.reverseColors ? value <= scale.value[2] : value >= scale.value[7]) {
151
155
  return "#404A85";
152
- } else if (value >= scale.value[6]) {
156
+ } else if (props.reverseColors ? value <= scale.value[3] : value >= scale.value[6]) {
153
157
  return "#3F668A";
154
- } else if (value >= scale.value[5]) {
158
+ } else if (props.reverseColors ? value <= scale.value[4] : value >= scale.value[5]) {
155
159
  return "#43808C";
156
- } else if (value >= scale.value[4]) {
160
+ } else if (props.reverseColors ? value <= scale.value[5] : value >= scale.value[4]) {
157
161
  return "#4C9C8A";
158
- } else if (value >= scale.value[3]) {
162
+ } else if (props.reverseColors ? value <= scale.value[6] : value >= scale.value[3]) {
159
163
  return "#5FB57E";
160
- } else if (value >= scale.value[2]) {
164
+ } else if (props.reverseColors ? value <= scale.value[7] : value >= scale.value[2]) {
161
165
  return "#85CB68";
162
- } else if (value >= scale.value[1]) {
166
+ } else if (props.reverseColors ? value <= scale.value[8] : value >= scale.value[1]) {
163
167
  return "#BDDD51";
164
- } else if (value >= scale.value[0]) {
168
+ } else if (props.reverseColors ? value > scale.value[8] : value >= scale.value[0]) {
165
169
  return "#F9E855";
166
170
  }
167
171
  }
@@ -176,10 +180,14 @@ export default defineComponent({
176
180
  }
177
181
  function setupScale() {
178
182
  minimalValue.value = Math.floor(
179
- Math.min(...props.data.map((x) => x.value))
183
+ Math.min(
184
+ ...props.data.filter((f) => f.value !== null).map((x) => x.value)
185
+ )
180
186
  );
181
187
  maximalValue.value = Math.ceil(
182
- Math.max(...props.data.map((x) => x.value))
188
+ Math.max(
189
+ ...props.data.filter((f) => f.value !== null).map((x) => x.value)
190
+ )
183
191
  );
184
192
  const step = (maximalValue.value - minimalValue.value) / 10;
185
193
  if (minimalValue.value !== null) {
@@ -253,5 +261,5 @@ export default defineComponent({
253
261
  </script>
254
262
 
255
263
  <style scoped>
256
- .map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:0;min-width:-moz-fit-content;min-width:fit-content;position:absolute;top:0;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855);height:10px;transform:rotate(180deg)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}
264
+ .map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:0;min-width:-moz-fit-content;min-width:fit-content;position:absolute;top:0;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855);height:10px;transform:rotate(180deg)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}.reverse_scale{background:linear-gradient(45deg,#f9e855,#bddd51,#85cb68,#5fb57e,#4c9c8a,#43808c,#3f668a,#404a85,#432974,#3f1151);height:10px;transform:rotate(180deg)}
257
265
  </style>
@@ -34,6 +34,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
34
34
  default: string;
35
35
  required: false;
36
36
  };
37
+ reverseColors: {
38
+ type: BooleanConstructor;
39
+ default: boolean;
40
+ };
37
41
  }>, {
38
42
  getColor: (value?: number) => "var(--lightest)" | "#3F1151" | "#432974" | "#404A85" | "#3F668A" | "#43808C" | "#4C9C8A" | "#5FB57E" | "#85CB68" | "#BDDD51" | "#F9E855" | undefined;
39
43
  handleHover: (region: RegionsKr) => void;
@@ -86,6 +90,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
86
90
  default: string;
87
91
  required: false;
88
92
  };
93
+ reverseColors: {
94
+ type: BooleanConstructor;
95
+ default: boolean;
96
+ };
89
97
  }>> & Readonly<{
90
98
  onOpenSource?: ((...args: any[]) => any) | undefined;
91
99
  }>, {
@@ -95,6 +103,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
95
103
  title: string | null;
96
104
  haveCustomTitle: string | null;
97
105
  uniqueID: string | null;
106
+ reverseColors: boolean;
98
107
  }, {}, {
99
108
  oneRegionKr: any;
100
109
  ArgSourceContainer: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tekkare/auriga",
3
- "version": "0.2.135",
3
+ "version": "0.2.136",
4
4
  "description": "Aurgia is a UI kit developped by Tekkare",
5
5
  "license": "MIT",
6
6
  "type": "module",