@kiva/kv-components 3.93.0 → 3.95.0

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 (16) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/package.json +4 -2
  3. package/utils/Alea.js +92 -0
  4. package/utils/loanCard.js +4 -1
  5. package/utils/touchEvents.js +22 -0
  6. package/vue/KvIntroductionLoanCard.vue +41 -26
  7. package/vue/KvLoanTag.vue +20 -5
  8. package/vue/KvPieChart.vue +232 -0
  9. package/vue/KvPopper.vue +178 -0
  10. package/vue/KvTooltip.vue +168 -0
  11. package/vue/KvTreeMapChart.vue +229 -0
  12. package/vue/stories/KvClassicLoanCard.stories.js +21 -0
  13. package/vue/stories/KvIntroductionLoanCard.stories.js +78 -11
  14. package/vue/stories/KvPieChart.stories.js +42 -0
  15. package/vue/stories/KvTooltip.stories.js +26 -0
  16. package/vue/stories/KvTreeMapChart.stories.js +42 -0
package/vue/stories/KvPieChart.stories.js ADDED
@@ -0,0 +1,42 @@
1
+ import KvPieChart from '../KvPieChart.vue';
2
+
3
+ const genderValues = [{ label: 'Female', value: 1243, percent: 0.6467221644120708 }, { label: 'Male', value: 676, percent: 0.3517169614984391 }, { label: 'Unspecified', value: 2, percent: 0.001040582726326743 }, { label: 'Nonbinary', value: 1, percent: 0.0005202913631633715 }];
4
+ const sectorValues = [{ label: 'Food', value: 575, percent: 0.2991675338189386 }, { label: 'Retail', value: 377, percent: 0.19614984391259105 }, { label: 'Agriculture', value: 285, percent: 0.14828303850156088 }, { label: 'Services', value: 211, percent: 0.10978147762747138 }, { label: 'Clothing', value: 183, percent: 0.09521331945889698 }, { label: 'Arts', value: 65, percent: 0.033818938605619145 }, { label: 'Housing', value: 65, percent: 0.033818938605619145 }, { label: 'Education', value: 36, percent: 0.018730489073881373 }, { label: 'Construction', value: 28, percent: 0.014568158168574402 }, { label: 'Health', value: 27, percent: 0.01404786680541103 }, { label: 'Transportation', value: 23, percent: 0.011966701352757543 }, { label: 'Personal Use', value: 19, percent: 0.009885535900104058 }, { label: 'Manufacturing', value: 13, percent: 0.006763787721123829 }, { label: 'Entertainment', value: 10, percent: 0.005202913631633715 }, { label: 'Wholesale', value: 5, percent: 0.0026014568158168575 }];
5
+
6
+ export default {
7
+ title: 'Charts/KvPieChart',
8
+ component: KvPieChart,
9
+ args: {
10
+ loading: false,
11
+ values: genderValues,
12
+ },
13
+ };
14
+
15
+ const Template = (args, {
16
+ argTypes,
17
+ }) => ({
18
+ props: Object.keys(argTypes),
19
+ components: {
20
+ KvPieChart,
21
+ },
22
+ template: `
23
+ <div>
24
+ <kv-pie-chart
25
+ :values="values"
26
+ :loading="loading"
27
+ />
28
+ </div>`,
29
+ });
30
+
31
+ export const Default = Template.bind({});
32
+
33
+ export const Loading = Template.bind({});
34
+ Loading.args = {
35
+ loading: true,
36
+ values: [],
37
+ };
38
+
39
+ export const ManyValues = Template.bind({});
40
+ ManyValues.args = {
41
+ values: sectorValues,
42
+ };
package/vue/stories/KvTooltip.stories.js ADDED
@@ -0,0 +1,26 @@
1
+ import KvTooltip from '../KvTooltip.vue';
2
+
3
+ export default {
4
+ title: 'KvTooltip',
5
+ component: KvTooltip,
6
+ };
7
+
8
+ export const Default = () => ({
9
+ components: {
10
+ KvTooltip,
11
+ },
12
+ template: `
13
+ <div>
14
+ <button id="my-cool-btn">Hover of Focus Me!</button>
15
+ <kv-tooltip controller="my-cool-btn">
16
+ <template #title>
17
+ What is an Experimental Field Partner?
18
+ </template>
19
+ If a Field Partner is labeled as Experimental, this means that Kiva has
20
+ required only a comparatively light level of due diligence and
21
+ monitoring, in exchange for only allowing this Field Partner access to a
22
+ small amount of funding through Kiva at any given time.
23
+ </kv-tooltip>
24
+ </div>
25
+ `,
26
+ });
package/vue/stories/KvTreeMapChart.stories.js ADDED
@@ -0,0 +1,42 @@
1
+ import KvTreeMapChart from '../KvTreeMapChart.vue';
2
+
3
+ const genderValues = [{ label: 'Female', value: 1243, percent: 0.6467221644120708 }, { label: 'Male', value: 676, percent: 0.3517169614984391 }, { label: 'Unspecified', value: 2, percent: 0.001040582726326743 }, { label: 'Nonbinary', value: 1, percent: 0.0005202913631633715 }];
4
+ const sectorValues = [{ label: 'Food', value: 575, percent: 0.2991675338189386 }, { label: 'Retail', value: 377, percent: 0.19614984391259105 }, { label: 'Agriculture', value: 285, percent: 0.14828303850156088 }, { label: 'Services', value: 211, percent: 0.10978147762747138 }, { label: 'Clothing', value: 183, percent: 0.09521331945889698 }, { label: 'Arts', value: 65, percent: 0.033818938605619145 }, { label: 'Housing', value: 65, percent: 0.033818938605619145 }, { label: 'Education', value: 36, percent: 0.018730489073881373 }, { label: 'Construction', value: 28, percent: 0.014568158168574402 }, { label: 'Health', value: 27, percent: 0.01404786680541103 }, { label: 'Transportation', value: 23, percent: 0.011966701352757543 }, { label: 'Personal Use', value: 19, percent: 0.009885535900104058 }, { label: 'Manufacturing', value: 13, percent: 0.006763787721123829 }, { label: 'Entertainment', value: 10, percent: 0.005202913631633715 }, { label: 'Wholesale', value: 5, percent: 0.0026014568158168575 }];
5
+
6
+ export default {
7
+ title: 'Charts/KvTreeMapChart',
8
+ component: KvTreeMapChart,
9
+ args: {
10
+ loading: false,
11
+ values: genderValues,
12
+ },
13
+ };
14
+
15
+ const Template = (args, {
16
+ argTypes,
17
+ }) => ({
18
+ props: Object.keys(argTypes),
19
+ components: {
20
+ KvTreeMapChart,
21
+ },
22
+ template: `
23
+ <div>
24
+ <kv-tree-map-chart
25
+ :values="values"
26
+ :loading="loading"
27
+ />
28
+ </div>`,
29
+ });
30
+
31
+ export const Default = Template.bind({});
32
+
33
+ export const Loading = Template.bind({});
34
+ Loading.args = {
35
+ loading: true,
36
+ values: [],
37
+ };
38
+
39
+ export const ManyValues = Template.bind({});
40
+ ManyValues.args = {
41
+ values: sectorValues,
42
+ };