@ttoss/react-dashboard 0.1.13 → 0.1.14

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 (2) hide show
  1. package/README.md +101 -92
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -26,11 +26,16 @@ import type {
26
26
 
27
27
  const templates: DashboardTemplate[] = [];
28
28
  const filters: DashboardFilter[] = [];
29
+ const selectedTemplate: DashboardTemplate | undefined = undefined;
29
30
 
30
31
  ReactDOM.render(
31
32
  <React.StrictMode>
32
33
  <ThemeProvider>
33
- <DashboardProvider filters={filters} templates={templates}>
34
+ <DashboardProvider
35
+ filters={filters}
36
+ templates={templates}
37
+ selectedTemplate={selectedTemplate}
38
+ >
34
39
  <App />
35
40
  </DashboardProvider>
36
41
  </ThemeProvider>
@@ -50,31 +55,29 @@ import type {
50
55
  import { DashboardFilterType } from '@ttoss/react-dashboard';
51
56
 
52
57
  const MyDashboard = () => {
53
- const templates: DashboardTemplate[] = [
54
- {
55
- id: 'default',
56
- name: 'Default Template',
57
- description: 'My default dashboard layout',
58
- grid: [
59
- {
60
- i: 'card-1',
61
- x: 0,
62
- y: 0,
63
- w: 4,
64
- h: 4,
65
- card: {
66
- title: 'Total Revenue',
67
- numberType: 'currency',
68
- type: 'bigNumber',
69
- sourceType: [{ source: 'api' }],
70
- data: {
71
- api: { total: 150000 },
72
- },
58
+ const selectedTemplate: DashboardTemplate = {
59
+ id: 'default',
60
+ name: 'Default Template',
61
+ description: 'My default dashboard layout',
62
+ grid: [
63
+ {
64
+ i: 'card-1',
65
+ x: 0,
66
+ y: 0,
67
+ w: 4,
68
+ h: 4,
69
+ card: {
70
+ title: 'Total Revenue',
71
+ numberType: 'currency',
72
+ type: 'bigNumber',
73
+ sourceType: [{ source: 'api' }],
74
+ data: {
75
+ api: { total: 150000 },
73
76
  },
74
77
  },
75
- ],
76
- },
77
- ];
78
+ },
79
+ ],
80
+ };
78
81
 
79
82
  const filters: DashboardFilter[] = [
80
83
  {
@@ -85,7 +88,14 @@ const MyDashboard = () => {
85
88
  },
86
89
  ];
87
90
 
88
- return <Dashboard templates={templates} filters={filters} loading={false} />;
91
+ return (
92
+ <Dashboard
93
+ selectedTemplate={selectedTemplate}
94
+ templates={[]}
95
+ filters={filters}
96
+ loading={false}
97
+ />
98
+ );
89
99
  };
90
100
  ```
91
101
 
@@ -99,6 +109,7 @@ The main dashboard component that orchestrates the entire dashboard experience.
99
109
  import { Dashboard } from '@ttoss/react-dashboard';
100
110
 
101
111
  <Dashboard
112
+ selectedTemplate={selectedTemplate}
102
113
  templates={templates}
103
114
  filters={filters}
104
115
  loading={false}
@@ -111,13 +122,14 @@ import { Dashboard } from '@ttoss/react-dashboard';
111
122
 
112
123
  **Props:**
113
124
 
114
- | Prop | Type | Default | Description |
115
- | ----------------- | -------------------------------------- | ------- | ------------------------------------------ |
116
- | `templates` | `DashboardTemplate[]` | `[]` | Array of dashboard templates |
117
- | `filters` | `DashboardFilter[]` | `[]` | Array of dashboard filters |
118
- | `loading` | `boolean` | `false` | Loading state for the dashboard |
119
- | `headerChildren` | `React.ReactNode` | - | Additional content to render in the header |
120
- | `onFiltersChange` | `(filters: DashboardFilter[]) => void` | - | Callback when filters change |
125
+ | Prop | Type | Default | Description |
126
+ | ------------------ | -------------------------------------- | ------- | ------------------------------------------ |
127
+ | `selectedTemplate` | `DashboardTemplate \| undefined` | - | The template to display in the dashboard |
128
+ | `templates` | `DashboardTemplate[]` | `[]` | Array of dashboard templates |
129
+ | `filters` | `DashboardFilter[]` | `[]` | Array of dashboard filters |
130
+ | `loading` | `boolean` | `false` | Loading state for the dashboard |
131
+ | `headerChildren` | `React.ReactNode` | - | Additional content to render in the header |
132
+ | `onFiltersChange` | `(filters: DashboardFilter[]) => void` | - | Callback when filters change |
121
133
 
122
134
  ### DashboardProvider
123
135
 
@@ -129,6 +141,7 @@ import { DashboardProvider } from '@ttoss/react-dashboard';
129
141
  <DashboardProvider
130
142
  filters={filters}
131
143
  templates={templates}
144
+ selectedTemplate={selectedTemplate}
132
145
  onFiltersChange={handleFiltersChange}
133
146
  >
134
147
  {children}
@@ -137,12 +150,13 @@ import { DashboardProvider } from '@ttoss/react-dashboard';
137
150
 
138
151
  **Props:**
139
152
 
140
- | Prop | Type | Default | Description |
141
- | ----------------- | -------------------------------------- | ------- | ---------------------------- |
142
- | `children` | `React.ReactNode` | - | Child components |
143
- | `filters` | `DashboardFilter[]` | `[]` | Filter state |
144
- | `templates` | `DashboardTemplate[]` | `[]` | Template state |
145
- | `onFiltersChange` | `(filters: DashboardFilter[]) => void` | - | Callback when filters change |
153
+ | Prop | Type | Default | Description |
154
+ | ------------------ | -------------------------------------- | ------- | ---------------------------- |
155
+ | `children` | `React.ReactNode` | - | Child components |
156
+ | `filters` | `DashboardFilter[]` | `[]` | Filter state |
157
+ | `templates` | `DashboardTemplate[]` | `[]` | Template state |
158
+ | `selectedTemplate` | `DashboardTemplate \| undefined` | - | The template to display |
159
+ | `onFiltersChange` | `(filters: DashboardFilter[]) => void` | - | Callback when filters change |
146
160
 
147
161
  ### useDashboard Hook
148
162
 
@@ -163,12 +177,12 @@ const MyComponent = () => {
163
177
 
164
178
  **Returns:**
165
179
 
166
- | Property | Type | Description |
167
- | ------------------ | ---------------------------------------------------- | -------------------------------------------- |
168
- | `filters` | `DashboardFilter[]` | Current filter state |
169
- | `updateFilter` | `(key: string, value: DashboardFilterValue) => void` | Function to update a specific filter by key |
170
- | `templates` | `DashboardTemplate[]` | Current template state |
171
- | `selectedTemplate` | `DashboardTemplate \| undefined` | Currently selected template based on filters |
180
+ | Property | Type | Description |
181
+ | ------------------ | ---------------------------------------------------- | ------------------------------------------- |
182
+ | `filters` | `DashboardFilter[]` | Current filter state |
183
+ | `updateFilter` | `(key: string, value: DashboardFilterValue) => void` | Function to update a specific filter by key |
184
+ | `templates` | `DashboardTemplate[]` | Current template state |
185
+ | `selectedTemplate` | `DashboardTemplate \| undefined` | Currently selected template passed as prop |
172
186
 
173
187
  ### DashboardCard
174
188
 
@@ -437,60 +451,54 @@ import type {
437
451
  import { DashboardFilterType } from '@ttoss/react-dashboard';
438
452
 
439
453
  const App = () => {
440
- const templates: DashboardTemplate[] = [
441
- {
442
- id: 'default',
443
- name: 'Default Dashboard',
444
- grid: [
445
- {
446
- i: 'revenue',
447
- x: 0,
448
- y: 0,
449
- w: 4,
450
- h: 4,
451
- card: {
452
- title: 'Total Revenue',
453
- numberType: 'currency',
454
- type: 'bigNumber',
455
- sourceType: [{ source: 'api' }],
456
- data: {
457
- api: { total: 150000 },
458
- },
459
- trend: {
460
- value: 15.5,
461
- status: 'positive',
462
- },
454
+ const selectedTemplate: DashboardTemplate = {
455
+ id: 'default',
456
+ name: 'Default Dashboard',
457
+ grid: [
458
+ {
459
+ i: 'revenue',
460
+ x: 0,
461
+ y: 0,
462
+ w: 4,
463
+ h: 4,
464
+ card: {
465
+ title: 'Total Revenue',
466
+ numberType: 'currency',
467
+ type: 'bigNumber',
468
+ sourceType: [{ source: 'api' }],
469
+ data: {
470
+ api: { total: 150000 },
471
+ },
472
+ trend: {
473
+ value: 15.5,
474
+ status: 'positive',
463
475
  },
464
476
  },
465
- {
466
- i: 'roas',
467
- x: 4,
468
- y: 0,
469
- w: 4,
470
- h: 4,
471
- card: {
472
- title: 'ROAS',
473
- numberType: 'number',
474
- type: 'bigNumber',
475
- sourceType: [{ source: 'api' }],
476
- data: {
477
- api: { total: 3.5 },
478
- },
479
- variant: 'light-green',
477
+ },
478
+ {
479
+ i: 'roas',
480
+ x: 4,
481
+ y: 0,
482
+ w: 4,
483
+ h: 4,
484
+ card: {
485
+ title: 'ROAS',
486
+ numberType: 'number',
487
+ type: 'bigNumber',
488
+ sourceType: [{ source: 'api' }],
489
+ data: {
490
+ api: { total: 3.5 },
480
491
  },
492
+ variant: 'light-green',
481
493
  },
482
- ],
483
- },
484
- ];
494
+ },
495
+ ],
496
+ };
497
+
498
+ // Optional: Keep templates array if you need to switch between templates
499
+ const templates: DashboardTemplate[] = [selectedTemplate];
485
500
 
486
501
  const filters: DashboardFilter[] = [
487
- {
488
- key: 'template',
489
- type: DashboardFilterType.SELECT,
490
- label: 'Template',
491
- value: 'default',
492
- options: [{ label: 'Default Dashboard', value: 'default' }],
493
- },
494
502
  {
495
503
  key: 'date-range',
496
504
  type: DashboardFilterType.DATE_RANGE,
@@ -525,6 +533,7 @@ const App = () => {
525
533
 
526
534
  return (
527
535
  <Dashboard
536
+ selectedTemplate={selectedTemplate}
528
537
  templates={templates}
529
538
  filters={filters}
530
539
  loading={false}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/react-dashboard",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "description": "ttoss dashboard module for React apps.",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -26,11 +26,11 @@
26
26
  "dependencies": {
27
27
  "react-day-picker": "^9.11.3",
28
28
  "react-grid-layout": "^1.5.2",
29
- "@ttoss/react-i18n": "^2.0.25",
30
29
  "@ttoss/components": "^2.11.7",
31
- "@ttoss/react-icons": "^0.5.6",
30
+ "@ttoss/react-i18n": "^2.0.25",
31
+ "@ttoss/forms": "^0.37.1",
32
32
  "@ttoss/ui": "^6.4.0",
33
- "@ttoss/forms": "^0.37.1"
33
+ "@ttoss/react-icons": "^0.5.6"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=16.8.0"