@devgateway/dvz-wp-commons 1.0.0 → 1.0.3
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/README.md +194 -0
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/build/hooks/useSetting.d.ts +0 -2
- package/build/hooks/useSetting.js +0 -11
package/README.md
CHANGED
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
# @devgateway/dvz-wp-commons
|
|
2
|
+
|
|
3
|
+
Common utilities for Data Visualization in WordPress that can also be used in other projects.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@devgateway/dvz-wp-commons)
|
|
6
|
+
[](https://github.com/devgateway/data-viz-wordpress/blob/main/packages/commons/LICENSE)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @devgateway/dvz-wp-commons
|
|
12
|
+
# or
|
|
13
|
+
yarn add @devgateway/dvz-wp-commons
|
|
14
|
+
# or
|
|
15
|
+
pnpm add @devgateway/dvz-wp-commons
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Overview
|
|
19
|
+
|
|
20
|
+
This package provides a collection of reusable components, utilities, and type definitions for data-viz WordPress. It facilitates consistent handling of chart configurations, data formatting, API connections, and more.
|
|
21
|
+
|
|
22
|
+
This package is used internally by DevGateway projects and is designed to be compatible with the project customizer, allowing for easy integration and extension in custom implementations.
|
|
23
|
+
|
|
24
|
+
## Components
|
|
25
|
+
|
|
26
|
+
### API and Data Configuration
|
|
27
|
+
|
|
28
|
+
- **APIConfig**: Configuration component for API connections.
|
|
29
|
+
- **CSVConfig**: Configuration for CSV data sources.
|
|
30
|
+
- **MapCSVSourceConfig**: Configuration for CSV data sources specific to maps.
|
|
31
|
+
- **DataFilters**: Components for filtering data in visualizations.
|
|
32
|
+
|
|
33
|
+
### Chart Components
|
|
34
|
+
|
|
35
|
+
- **ChartColors**: Provides color schemes (categorical, sequential, diverging) for charts.
|
|
36
|
+
- **ChartLegends**: Customizable legend components for charts.
|
|
37
|
+
- **ChartMeasures**: Components for configuring chart measures.
|
|
38
|
+
- **Measures**: Utilities for handling data measures.
|
|
39
|
+
- **Tooltip**: Customizable tooltip component for charts.
|
|
40
|
+
|
|
41
|
+
### Block Components
|
|
42
|
+
|
|
43
|
+
- **BlockEditWithAPIMetadata**: Block editor component with API metadata support.
|
|
44
|
+
- **BlockEditWithFilters**: Block editor component with filter capabilities.
|
|
45
|
+
- **ComponentWithSettings**: Component wrapper with settings panel.
|
|
46
|
+
- **SizeConfig**: Configuration component for size settings.
|
|
47
|
+
|
|
48
|
+
### Formatting Components
|
|
49
|
+
|
|
50
|
+
- **Format**: Advanced formatting utilities for chart data.
|
|
51
|
+
|
|
52
|
+
### Post Type Components
|
|
53
|
+
|
|
54
|
+
- **Post**: Components and utilities for handling WordPress post data.
|
|
55
|
+
|
|
56
|
+
## Utilities
|
|
57
|
+
|
|
58
|
+
### API Utilities
|
|
59
|
+
|
|
60
|
+
- **APIutils**: Utility functions for API operations.
|
|
61
|
+
- `getTranslatedOptions`
|
|
62
|
+
- `getTranslation`
|
|
63
|
+
- `isSupersetAPI`
|
|
64
|
+
|
|
65
|
+
### Mobile Utilities
|
|
66
|
+
|
|
67
|
+
- **MobileConfigUtils**: Utilities for mobile configurations.
|
|
68
|
+
- `extractAxisValues`
|
|
69
|
+
- `getSelectedLabelsForApp`
|
|
70
|
+
- `transformDataToAppObject`
|
|
71
|
+
- `updateMeasureLabels`
|
|
72
|
+
- `getSelectedItemsForApp`
|
|
73
|
+
- `getStoredOrSetItem`
|
|
74
|
+
|
|
75
|
+
### UI Utilities
|
|
76
|
+
|
|
77
|
+
- **Util**: General UI utilities.
|
|
78
|
+
- `panelFocus`
|
|
79
|
+
- `togglePanel`
|
|
80
|
+
|
|
81
|
+
### Constants
|
|
82
|
+
|
|
83
|
+
- **BLOCKS_CATEGORY**: Category definition for blocks.
|
|
84
|
+
- **BLOCKS_NS**: Namespace for blocks.
|
|
85
|
+
- **DEFAULT_FORMAT_SETTINGS**: Default settings for formatting.
|
|
86
|
+
|
|
87
|
+
## Icons
|
|
88
|
+
|
|
89
|
+
- **GenericIcon**: Generic icon component.
|
|
90
|
+
- **ChartIcon**: Chart-specific icon component.
|
|
91
|
+
|
|
92
|
+
## Types
|
|
93
|
+
|
|
94
|
+
### Core Types
|
|
95
|
+
|
|
96
|
+
- **Options**: Basic option type with label, value, and optional labels.
|
|
97
|
+
- **Dimension**: Interface for data dimensions.
|
|
98
|
+
- **Category/CategoryItem**: Types for data categorization.
|
|
99
|
+
- **Measure**: Interface for data measures.
|
|
100
|
+
- **Filter**: Interface for data filters.
|
|
101
|
+
- **FileContent**: Interface for file content metadata.
|
|
102
|
+
|
|
103
|
+
### Chart Types
|
|
104
|
+
|
|
105
|
+
- **ChartColorsProps**: Props for chart colors component.
|
|
106
|
+
- **ChartLegendsProps**: Props for chart legends component.
|
|
107
|
+
- **ChartMeasuresProps**: Props for chart measures component.
|
|
108
|
+
- **FormatProps**: Props for format component.
|
|
109
|
+
- **MeasuresProps**: Props for measures component.
|
|
110
|
+
- **DataFiltersProps**: Props for data filters component.
|
|
111
|
+
- **MapCSVSourceConfigProps**: Props for map CSV source config component.
|
|
112
|
+
|
|
113
|
+
### Block Types
|
|
114
|
+
|
|
115
|
+
- **BlockEditWithAPIMetadataProps/State**: Props and state for BlockEditWithAPIMetadata.
|
|
116
|
+
- **BlockEditWithFiltersProps/State**: Props and state for BlockEditWithFilters.
|
|
117
|
+
- **ComponentWithSettingsProps/State**: Props and state for ComponentWithSettings.
|
|
118
|
+
- **SizeConfigProps**: Props for SizeConfig component.
|
|
119
|
+
|
|
120
|
+
### Data Types
|
|
121
|
+
|
|
122
|
+
- **DgSettings**: Interface for global settings.
|
|
123
|
+
- **EurekaResponse**: Interface for Eureka service responses.
|
|
124
|
+
- **Menu**: Interface for menu structure.
|
|
125
|
+
- **Media**: Interface for media attachments.
|
|
126
|
+
- **SearchResult/SearchResults**: Types for search functionality.
|
|
127
|
+
- **Taxonomy/Taxonomies**: Types for WordPress taxonomies.
|
|
128
|
+
- **Wp_Types**: Types for WordPress content types.
|
|
129
|
+
|
|
130
|
+
### Post Types
|
|
131
|
+
|
|
132
|
+
- **Post**: Interface for WordPress posts.
|
|
133
|
+
- **PostContent**: Interface for post content.
|
|
134
|
+
- **PostLinks**: Interface for post links.
|
|
135
|
+
- **PostYoastHeadJSON**: Interface for Yoast SEO data.
|
|
136
|
+
- **PotentialActionType**: Enum for schema action types.
|
|
137
|
+
- **PostSchema**: Interface for structured data schema.
|
|
138
|
+
|
|
139
|
+
## Integration with Project Customizer
|
|
140
|
+
|
|
141
|
+
This package is designed to be integrated with the project customizer, allowing for:
|
|
142
|
+
|
|
143
|
+
- Custom component configurations
|
|
144
|
+
- Theme-specific styling overrides
|
|
145
|
+
- Extension of data types for project-specific needs
|
|
146
|
+
- Custom visualization implementations
|
|
147
|
+
|
|
148
|
+
When used with the project customizer, components from this package can be easily configured and extended to meet specific project requirements.
|
|
149
|
+
|
|
150
|
+
## Usage Examples
|
|
151
|
+
|
|
152
|
+
### Basic Chart Configuration
|
|
153
|
+
|
|
154
|
+
```jsx
|
|
155
|
+
import { ChartColors, ChartLegends, Format } from '@devgateway/dvz-wp-commons';
|
|
156
|
+
|
|
157
|
+
const MyChartComponent = ({ attributes, setAttributes }) => {
|
|
158
|
+
return (
|
|
159
|
+
<div>
|
|
160
|
+
<ChartColors
|
|
161
|
+
attributes={attributes}
|
|
162
|
+
setAttributes={setAttributes}
|
|
163
|
+
/>
|
|
164
|
+
<ChartLegends
|
|
165
|
+
attributes={attributes}
|
|
166
|
+
setAttributes={setAttributes}
|
|
167
|
+
/>
|
|
168
|
+
<Format
|
|
169
|
+
attributes={attributes}
|
|
170
|
+
setAttributes={setAttributes}
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
);
|
|
174
|
+
};
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### API Configuration
|
|
178
|
+
|
|
179
|
+
```jsx
|
|
180
|
+
import { APIConfig } from '@devgateway/dvz-wp-commons';
|
|
181
|
+
|
|
182
|
+
const MyAPIComponent = ({ attributes, setAttributes }) => {
|
|
183
|
+
return (
|
|
184
|
+
<APIConfig
|
|
185
|
+
attributes={attributes}
|
|
186
|
+
setAttributes={setAttributes}
|
|
187
|
+
/>
|
|
188
|
+
);
|
|
189
|
+
};
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## License
|
|
193
|
+
|
|
194
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"root":["../src/
|
|
1
|
+
{"root":["../src/APIConfig.tsx","../src/APIutils.ts","../src/Blocks.tsx","../src/CSVSourceConfig.tsx","../src/ChartColors.tsx","../src/ChartLegends.tsx","../src/ChartMeasures.tsx","../src/Constants.ts","../src/DataFilters.tsx","../src/Format.tsx","../src/MapCSVSourceConfig.tsx","../src/Measures.tsx","../src/MobileConfigUtils.ts","../src/Tooltip.tsx","../src/Util.tsx","../src/common-types.d.ts","../src/index.ts","../src/post-type.ts","../src/types.ts","../src/hooks/index.ts","../src/icons/Chart.tsx","../src/icons/Generic.tsx","../src/icons/index.ts"],"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devgateway/dvz-wp-commons",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Common Utilities for Data Viz Wordpress that can be also used in other projects",
|
|
6
6
|
"author": "Sebastian Dimunzio",
|
|
7
|
+
"license": "MIT",
|
|
7
8
|
"maintainers": [
|
|
8
9
|
"Sebastian Dimunzio",
|
|
9
10
|
"Timothy Mugo"
|
|
@@ -33,8 +34,8 @@
|
|
|
33
34
|
"registry": "https://registry.npmjs.org/"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
|
-
"@anolilab/semantic-release-pnpm": "^1.1.10",
|
|
37
37
|
"@babel/runtime": "^7.27.0",
|
|
38
|
+
"@colbyfayock/semantic-release-pnpm": "^1.2.2",
|
|
38
39
|
"@semantic-release/changelog": "^6.0.3",
|
|
39
40
|
"@types/lodash.isempty": "^4.4.9",
|
|
40
41
|
"@types/papaparse": "^5.3.15",
|
|
@@ -69,6 +70,6 @@
|
|
|
69
70
|
"format:js": "wp-scripts format-js",
|
|
70
71
|
"lint:js": "wp-scripts lint-js",
|
|
71
72
|
"start": "tsc -w",
|
|
72
|
-
"
|
|
73
|
+
"ci:publish": "pnpm publish"
|
|
73
74
|
}
|
|
74
75
|
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { useSelect } from "@wordpress/data";
|
|
2
|
-
export const useSetting = (setting) => {
|
|
3
|
-
return useSelect((select) => {
|
|
4
|
-
// @ts-ignore
|
|
5
|
-
const settings = select('core/editor').getSettings();
|
|
6
|
-
return settings[setting];
|
|
7
|
-
}, []);
|
|
8
|
-
};
|
|
9
|
-
export const useSettingWithFallback = (setting, fallback) => {
|
|
10
|
-
return useSetting(setting) ?? fallback;
|
|
11
|
-
};
|