Accept-Language: en-US
to all requests (#404)Renderer for DeepSee Dashboards in Browser with MDX2JSON as a Serverside and JS web-client.
Developed using Angular11 and Highcharts.
This is newly rewritten DeepSeeWeb with TypeScript & Angular 10!
Current version is alpha!
Some features of new version:
Now user can clearly see and navigate to dashboards via breadcrumbs, changing namespace, etc.
Query parameter “ns” for namespace was gone. Now url constructed by following rule
“/namespace/folder/folder/…/dashboard.dashboard”,
eg. http://mysite.com/dsw/#/IRISAPP/Test/Countries.dashboard
Now user can easly see options available for each screen and change settings
This features will be implemented soon and are to be included in RC
First be sure, that you have MDX2JSON installed. To test it open URL <server:port>/MDX2JSON/Test
You should see something like this:
{ "DefaultApp":"\/mdx2json", "Mappings": { "Mapped":["MDX2JSON","SAMPLES" ], "Unmapped":["%SYS","DOCBOOK","USER" ] }, "Status":"OK", "User":"UnknownUser", "Version":2.2 }
Download the latest release xml file: https://github.com/intersystems-ru/DeepSeeWeb/releases
Import it to any Caché namespace, f.e. to USER.
Run in terminal:
USER> d ##class(DSW.Installer).setup()
It will:
To use DSW Open server:port/dsw/index.html
Demo: https://www.youtube.com/watch?v=-HplM12eNik
Sometimes after installation you can see umlyauts in the client. like in the shot:
To fix this there are tow ways:
Or:
zw ^%SYS("CSP","DefaultFileCharset")
This setting should be “utf-8”. If there is another setting, save it somewhere and change to “utf-8”
So this should fix it:
set ^%SYS("CSP","DefaultFileCharset")="utf-8"
Widgets can be embedded in other pages. Easiest way to embed a widget is to navigate to the widget, set it into a desired state, press RMB to open context menu and press Share
button. It would show a url for embedding.
Embedded URL is generated as follows. Start with a dashboard URL and add required widget
parameter. Optionally add other URL parameters. All parameter values MUST be URL escaped. Available parameters are:
Name | Value | Value, escaped | Description |
---|---|---|---|
widget | 1 | 1 | Which widget from the dashboard to show (in order of widget definition). |
FILTERS | TARGET:*;FILTER:[period].[H1].[period].&[10\] |
TARGET:*;FILTER:%5Bperiod%5D.%5BH1%5D.%5Bperiod%5D.%26%5B104%5D |
Filters to use. Follows InterSystems BI FILTERS url parameter. |
variables | variable1.value1 variable1.value1~variable2.XYZ |
variable1.value1 variable1.value1~variable2.XYZ |
Provide pivot variable values. Variables are separated by ~ . Variable and value are separated by . . |
drilldown | level1 level1~level2 [regionD].[H1].[regionL].&[23]~[regionD].[H1].[rayonL].&[56043] |
level1 level1~level2 %5BregionD%5D.%5BH1%5D.%5BregionL%5D.%26%5B23%5D~%5BregionD%5D.%5BH1%5D.%5BrayonL%5D.%26%5B56043%5D |
Drilldown on a widget. Drilldown levels are separated by ~ . |
noheader | 1 |
1 |
Do not display header information. Defaults to 0 . |
datasource | map/weights.pivot |
map%2Fweights.pivot |
What datasource to use for widget. |
Embedded widgets interact with a parent in two ways:
dsw
object for shared widgets:// Define dsw object in a parent window using this interface: export interface IDSW { onFilter: (e: IWidgetEvent) => void; onDrill: (e: IWidgetEvent) => void; } // Widget event export interface IWidgetEvent { index: number; widget: IWidgetInfo; drills?: IWidgetDrill[]; filters?: string; }
// Example:
window.dsw = {
onDrill: (data) => {
// handle drill event here
},
onFilter: (data) => {
// handle filter event here
}
}
// Extended interface for widget event export interface IWidgetEvent { type: WidgetEventType; index: number; widget: IWidgetInfo; drills?: IWidgetDrill[]; filters?: string; datasource?: string; }
// Example listener in parent
window.addEventListener('message', e => {
const event = e.data as IWidgetEvent;
switch (event.type) {
case 'drill':
// code ...
break;
case 'filter':
// code ...
break;
case 'datasource':
// code ...
break;
}
});
// hide map controls, assuming widget in iframe element
iframe.postMessage({ type: 'map.applyStyle', selector: '.ol-control', style: 'display', value:'none' });
disableContextMenu=1
data property to disable DSW context menu on any widget. Also, context menu can be disabled on shared widget by passing url parameter disableContextMenu=1
To create a map widget you’ll need:
map
and name equal to the polygons file.coordsProperty
dataproperty with the value being the name of this property in your widget.coordsProperty
value, with the values being unique polygon identifiers.Data Property | Type | Description | Value | Default |
---|---|---|---|---|
tooltipProperty | dataproperty | Define custom tooltip. Tooltip appears when user’s cursor hovers over a polygon. | Datasource column name | Row name |
popupProperty | dataproperty | Define custom popup. Tooltip appears when user’s cursor presses LMB on a polygon and there’s no DRILLDOWN. | Datasource column name | Row name |
coordsProperty | dataproperty | Property present in both the datasource AND geojson containing polygon id for a tile | Datasource column name | |
colorProperty | dataproperty | Name of a numeric property, defining polygon color. | Datasource column name | |
tileUrl | dataproperty | Tile server URL | https://tile-c.openstreetmap.fr/hot/{z}/{x}/{y}.png | |
coordsJsFile | property | File with a JS or GeoJSON polygons. Requested from the root of a default web app for a namespace | js or geojson path | Widget name |
colorFormula | property | Formula used to calculate polygon color. | hsl((255-x)/255 * 120, 100%, 50%) rgb(x, 255-x, 0) |
|
polygonTitleProperty | property | Define custom polygon title | Datasource column name | |
colorProperty | property | Deprecated by a dataproperty with a same name | ||
markerPopupContentProperty | property | Deprecated by a popupProperty dataproperty | ||
colorClientProperty | property | Deprecated by a colorProperty dataproperty |
DeepSeeWeb allows modification of exist widgets and custom widget registration as well.
For base widget class methods and properties description please read Addons.
To setup custom widget simply copy widget js file to /addons
folder.
For custom widget example, please look at https://github.com/intersystems-community/DeepSeeWeb/blob/master/src/factories/customWidget.js. This is simple custom widget that represents html5 canvas for drawing.
User can create or use custom themes, more about it here: Custom themes.
Though DeepSeeWeb source goes with MIT License it uses hicharts.js for visualisation of several widgets so please obey the Highcharts license when use DeepSeeWeb for commercial applications.
According to Highcharts license it’s free for non-commercial usage
At least NodeJS v16.14.0 required to build application.
npm i
dist
folder will contain built appHere is the article on InterSystems Developer Community describing DSW features and capabilites.
Accept-Language: en-US
to all requests (#404)%3D
at the endnofilters=1
.{=&
& ,=&[
characters=&
characters&
character&
characternodrag=1
and noresize=1
(#392)override
(blank widgets)overrides.chartLegend.legendLabels
) for base charts (#383, #385)donutChart3D
typetype=numeric
support for "dsw-input" componenttargetPropertyDataType
equals to %DeepSee.Time.DayMonthYear
3.1.84
embed=1
(#361)setFilter
, setRowSpec
actions (#281)sourceURL
generation for addon files loaded at runtime for better access using dev tools%ZEN.Component.calendar
class (#338)smiley
, light bar
, traffic light
. fixed gauge
widget (#1316)combo chart
and overrides for series type (#357)sum%
issue if data has empty valuesdisplay
propertydata properties
is present, only defined properties will be displayed for ALL widgets! (#354)sum%
support for scorecard (#350)widget > data > data properties
(#352)target%
support for scorecard (#353)rangeLower/rangeUpper
. when linked to a column by text nameoverrides
always overwrites dataProperties
formatrowcount
if MDX already contains HEADnumber
value in filter received from mdx2json/KPI
filters feature to process filteringtargetValue
& target%
, uses auto max value for plotBox
axisoverrides
processing to JSON object after mdx2json fixes (removed unsafe eval)overrideBaseType
parameter defined in AddonInfo
static variable// Ecample for overriding default "Bar Chart" widget with custom addon
static AddonInfo: IAddonInfo = {
version: 1,
type: 'custom',
overrideBaseType: 'barchart'
};
maxZoom
data property to specify maximum zoom level for map widget (#235)tooltipStyles
data property. specify JSON with css properties to apply on a tooltip. e.g. { "padding": "10px", "font-size": "20px" }
popupStyles
data property. specify JSON with css properties to apply on a popup. e.g. { "padding": "10px", "font-size": "20px" }
index
now contains widget name, if widget shared by namepolygonTitleProperty
, now it displays correctly on polygonspolygonTitleProperty
if value is numberdecimalSeparator
, numericGroupSeparator
, numericGroupSize
options for widgets (#228)dataLabels
data property for map widget (#231). now values can be displayed directly on map.dataLabels=1
to show values. dataLabels
can be set to JSON with options to customize labels,{ "size": 12, "font": "Calibri,Arial,sans-serif", "color": "#000", "stroke": "#FFF", "strokeWidth": 2 }
.{ "color": "#F00", "size": 18 }
http://test.com/#/MAP/map/Map.dashboard?widget=UAMap.geojson
(#230)percentageFormat
data property, to set format of percents for widgets that show percentage values, e.g. #.##
(#229)fixMinZoom
and fixMaxZoom
data properties for map widget. To fix zoom out set fixMinZoom=1
tileUrl
data property for map widget to specify custom tiles, e.g. https://tile-c.openstreetmap.fr/hot/{z}/{x}/{y}.png
disableContextMenu
, when set to "1" disables context menu on shared widgetdisableContextMenu
, when set to "1" disables context menu on shared widgetscolorFormula
now taken from data properties and can define formula in a css way to calculate color of polygon:
hsl((255-x)/255 * 120, 100%, 50%)
rgb(0, x, 0)
x
- relative data value from 0(minimum value) to 255(maximum value)hsl(193 + x/255 * (235 - 193), 100%, 50%)
popupProperty
tooltipProperty
(#222)postMessage
: // hide map controls
iframe.postMessage({ type: 'map.applyStyle', selector: '.ol-control', style: 'display', value:'none' });
datasource
url parameter changed while changing datasource on shared widgettooltipProperty
data property for map widget to define custom tooltipspostMessage
to avoid cross-domain restrictions:// Extended interface for widget event
export interface IWidgetEvent {
type: WidgetEventType;
index: number;
widget: IWidgetInfo;
drills?: IWidgetDrill[];
filters?: string;
datasource?: string;
}
// Example
window.addEventListener('message', e => {
const event = e.data as IWidgetEvent;
switch (event.type) {
case 'drill':
// code ...
break;
case 'filter':
// code ...
break;
case 'datasource':
// code ...
break;
}
});
dsw
object for shared widgets.// Define dsw object in window using this interface:
export interface IDSW {
onFilter: (e: IWidgetEvent) => void;
onDrill: (e: IWidgetEvent) => void;
}
// Widget event
export interface IWidgetEvent {
index: number;
windget: IWidgetInfo;
drills?: IWidgetDrill[];
filters?: string;
}
// Example:
window.dsw = {
onDrill: (data) => {
// handle drill event here
},
onFilter: (data) => {
// handle filter event here
}
}
dist-addons
addons
folder./src/addons/simple-addon.component.ts
as reference. Do not compile old addons - they won't work.Addons.md
my-addon.ts
> my-addon.js
(previously, Angular CLI creates addon-0
, addon-1
, etc.)removed non-complete styles from future release (issue with pivot colors)
Note: if you store config on your server, then probably you need to reset charts color before use it, because colors are stored in your config. To do it: click on palette icon on chart header and press "Reset to default" button, then press "Apply". After that you can export new configuration file)
This is alpha release of newly rewritten DSW
with TypeScript and Angular 10 + service workers support.
This version comes with new UI and latest versions
of Highcharts, gridster and other libs.
This version is still not supports:
Do not install it, if you use features described above.
This is alpha release of newly rewritten DSW
with TypeScript and Angular 10 + service workers support.
This version comes with new UI and latest versions
of Highcharts, gridster and other libs.
This version is still not supports:
Do not install it, if you use features described above.
This is alpha release of newly rewritten DSW
with TypeScript and Angular 10 + service workers support.
This version comes with new UI and latest versions
of Highcharts, gridster and other libs.
This version is still not supports:
Do not install it, if you use features described above.
added formatting support for text widget
changed bubble size calculation algorithm and min/max sizes
fixed treemap hover issue
fixed bubble chart data issue
fixed bubble chart overflow issue
fixed bubble chart issues with some cases
fixes for zpm
Added oAuth support
Fixed issue with widgets on tiles
Fixed issue with chooseColumnSpec
Fixed bubble chart "title" for radius issue
Fixed bubble chart "undefined" series issue
New version of Highcharts
Fixed issue with chooseColumnSpec
Added initial support for oAuth
Bubble chart KPI now show radius
Fixed issue with dashboard filters
Fixed addons loading issue
Fixed issue with namespace detection on home screen
Fixed issue with zero values on charts
Fixes for mobile version of app
Now DSW can be run in responsive mode on mobile devices
Added baber-polyfill for ES5 compatibility
Added baber-polyfill for ES5 compatibility