@discoveryjs/discovery
Advanced tools
Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards
Hackable JSON discovery tool
Documentation in progress...
> npm install @discoveryjs/discovery
Model goes through data->prepare->render chain. Data can be modified with prepare function and rendered by various views and its combinations.
View is a function(el, config, data, context) where:
el - DOM-element in which view will be renderedconfig - configuration of viewdata - data to rendercontext - contains of model data, metaifo (createdAt, etc), router (optional), any user defined or view defined additional dataPage is a root view function(el, data, context). Similar to view it has all of its arguments except config.
To define a page you should call discovery.page.define(pageId, render(el, data, context), options) where:
pageId - unique page identifierrender - page render function described aboveoptions - object with options:
reuseEl - do not clear container before render page (skiped for first render or pageId change)init - invokes on first page render or pageId changekeepScrollOffset - dont scroll to page top if pageId didn't changed since last page renderencodeParamsdecodeParamsOther handy methods for working with page:
discovery.renderPage()discovery.setPage(pageId, pageRef, renderParam), discovery.setPageParams(renderParams) triggers renderPage()discovery.getPageContext() gets context of pageThere are some built-in special pages:
defaultreportnot-foundYou can override this pages with page.define() method
To define new view just call discovery.view.define(viewId, render, options) where:
viewId - unique view identifierrender - function(el, config, data, context) or view definition objectoptions - object with following fields:
tag - a tag name for a view container element. When value is false or null then DocumentFragment is used as a containerYou can render your view with discovery.view.render(el, view, data, context) where:
view can be string viewId, ViewDefinition or Array<ViewDefinition> viewId will expand to { view: viewId }.Also you can specify
viewasviewId:query, that will give you handy shortcut to{ view: viewId, data: query }
viewDefinition object with view definition settings:
view: string viewIdwhen: query, will be coerced to Boolean (but empty arrays and objects will coerce to false)data: query (will be described later)Also special built-in sidebar view is available you can override this view with view.define
As a query you can specify string which will be processed by Jora so your data will be a result of following flow:
jora(value) -> function(data, context) -> data
Or you can use function(data, context) as query as well. Also you can use any data as query right away.
MIT
1.0.0-beta.92 (18-12-2024)
unloadData event when modelfree extension is usedsignature view, similar to struct viewactionCopySource option to source view to customise behaviour of "copy to clipboard" buttonsource view when a string is passed as datamarkdown views to correctly set target="_blank" for links when the href attribute contains an interpolated valuesource view props into nested views rendering (action buttons, prelude, and postlude) through the context as sourceViewPropsstruct, signature and source views to relay on root settingsCmd+Click or Ctrl+Click in inspect mode to open hovered view page in view's showcasecomputeClassName() and applyComputedClassName() methods to view render context API--discovery-monospace-font-size and --discovery-monospace-line-height!anchor is now treated as pageAnchor. Previously, !anchor was included in pageParams, now it’s a separate value with its own property and event on the ViewModel instancepageStateChange event to no longer fire when !anchor in the page hash changes, meaning ViewModel will not initiate a render on !anchor hash parameter changes!anchor from ViewModel#pageParamsViewModel#pageAnchor to store the page’s anchor value (!anchor) or nullpageAnchorChange event for ViewModel, which fires when pageAnchor changesModel#encodePageHash() to accept pageAnchor as the 4th parameterModel#decodePageHash() to return pageAnchorViewModel#setPage() and ViewModel#setParams() to reset the anchor (pageAnchor) since pageParams can hold !anchor anymoreViewModel#setPageHashState(pageState, replace) and ViewModel#setPageHashStateWithAnchor(pageStateWithAnchor, replace) methodsViewModel#overridePageHashState(pageState, replace) and ViewModel#overridePageHashStateWithAnchor(pageStateWithAnchor, replace) methodsViewModel#getPageHashState() and ViewModel#getPageHashStateWithAnchor() methodsViewModel#setPageHash() to transform hashes starting with #! (e.g. #!{value}) into #{current-hash}&!anchor={value}. Note that a #! hash will reset the anchor (set to null) but keep other values intact. This change doesn’t conflict with existing logic since a valid encoded anchor uses #&!anchor=...ViewModel#applyPageAnchor() method to apply current pageAnchor to rendered page contentpageLink() jora query helper to accept a pageAnchor parameterEmbedApp#setPageHashState() and EmbedApp#setPageHashStateWithAnchor() methodsEmbedApp#setPageAnchor() methodEmbedApp#pageAnchor observertable view:
headerClassName option in col config which behaves the same way as className but applies to header cellview-table-header-cell class to header cell elementsinput view:
htmlStep optionvalue option to no longer be interpreted as a querydarkmode) for simplicity and alignment with recent CSS updates and the Embed API:
DarkModeController class to ColorSchemeViewModel options darkmode and darkmodePersistent to colorScheme and colorSchemePersistent (old options are still supported as fallbacks with a warning if the new options are not specified)ViewModel#darkmode to ViewModel#colorSchemenavbuttons.darkmodeToggle to navbuttons.colorSchemeToggleColorScheme#value from boolean to 'light' or 'dark'ColorScheme#mode values to 'auto', 'manual' and 'only'ColorScheme#persistent to store a boolean, indicating whether ColorScheme is backed by a persistent storeColorScheme#state with possible values: 'auto', 'light', 'light-only', 'dark' and 'dark-only'(value: boolean, mode: Mode) => void to (value: ColorSchemeValue, mode: ColorSchemeState) => voidlocalStorageEntry() to getLocalStorageEntry()sessionStorageEntry() to getSessionStorageEntry()getLocalStorageValue(key) and getSessionStorageValue(key) methods to read values directly from storage; these methods return null if no entry exists for the specified key or if the storage is unavailablePersistentStorageEntry class derived from ObserverFAQs
Frontend framework for rapid data (JSON) analysis, shareable serverless reports and dashboards
The npm package @discoveryjs/discovery receives a total of 108 weekly downloads. As such, @discoveryjs/discovery popularity was classified as not popular.
We found that @discoveryjs/discovery demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.