客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：christabor/flask_jsondash开源软件地址：https://github.com/christabor/flask_jsondash开源编程语言：Python 48.4%开源软件介绍：Flask JSONDash
Easily configurable, chart dashboards from any arbitrary API endpoint. JSON config only. Ready to go.
This project is a flask blueprint that allows you to create sleek dashboards without writing any front end (or backend) code. Everything is powered through simple JSON configurations for declaring arbitrary charts. Features
It uses any specified json endpoint to get data from, so long as the payload format is correct. JSON configurations introThe configuration JSON provides core functionality and is at the heart of the project. There are several comprehensive examples available in the examples/config directory to give you an idea of how it works, as well as the core configuration documentation. An simple example: {
"modules": [
{
"type": "timeseries",
"name": "name3",
"width": 510,
"height": 400,
"dataSource": "http://localhost:5001/test1",
"order": 0
}
]
}(4.0 and later) You can even provide custom inputs to allow interactivity on each chart! E.g. {
"modules": [
{
"name": "line",
"height": "400",
"width": "500",
"dataSource": "http://127.0.0.1:5004/custom-inputs",
"override": false,
"guid": "a6eb10e7-26fa-7814-818a-3699b24415c5",
"type": "line",
"inputs": {
"btn_classes": ["btn", "btn-info", "btn-sm"],
"submit_text": "Submit",
"options": [
{
"type": "number",
"name": "entries",
"input_classes": ["form-control", "input-sm"],
"label": "Number of points",
"help_text": "Change the number of points per entry shown"
}
]
}
}
]
}Which will map to query parameters ( Also note that the order of the inputs in the json will determine their order in html. Below is an example output using a custom input configuration:
See the examples/config directory for all the supported options. DemoIf you want to see all/most charts in action, you'll need to fire up the Various chart schemas JSON formatsEach chart is very straightforward. Most of the power is leveraged by the various charting libraries that flask-jsondash defers to. See schemas for more detail on how your endpoint json data should be formatted for a given chart type, as well as how to find docs for each supported library. UsageQuickstartSetting database environment variables.Make sure the following env vars are set:
Starting DBMake sure to start so json configuration can be saved. Starting db: MongoDBStart however you'd like, but usually Download the package and start the appMethod 1 - use provided flask app git clone https://github.com/christabor/flask_jsondash.git
cd flask_jsondash
virtualenv env
source env/bin/activate
python setup.py install
cd example_app
python app.pyThis will setup the app in a virtual environment and run the included test app ( If you want to import the blueprint into your own existing flask instance: Method 2 - use your existing app pip install flask-jsondashYour app will need to import and register the blueprint, as well as have the appropriate template tags. An example of this can be found here. Method 3 - Docker Assuming you have docker and docker-compose installed: git clone https://github.com/christabor/flask_jsondash.git
make dockerizeThis will build the base and services images, setup your docker services and link them together. The endpoints will run on Note that there are three docker files, a base and then inheriting ones. This is a way to speed up subsequent app-specific builds without having to reinstall python and update apt repos Note, for any serious usage, you'll always want to configure external volumes for mongodb, so that your data is persisted OUTSIDE of docker. Python 3.x usageThe above should work, but you'll need to use the python 3.x equivalent for all of the operations; e.g.: RequirementsCore
Javascript/CSSThese are not included, as you are likely going to have them yourself. If you don't, you'll need to add them:
These are necessary and included, based simply on the likelihood they may not already be used:
Starting flask appEither import and use the blueprint in your own flask app, or run Starting the test serverRun Using remote AJAX endpointsSee CustomizationBeyond the above outlined configurations that power the core of jsondash, there are more ways to control how the application works. Flask configurationAuthenticationBy default, no authentication is performed for a given action. However, supporting your own custom auth for each type is just a simple config away. Using the flask pattern of injecting configurations into the def can_edit_others(view_id=None):
if view_id == '...' and session.get('user')['name'] in SECRET_ADMINS:
return True
return False
def can_delete_charts():
return session.get('user')['name'] in SECRET_ADMINS
charts_config = dict(
auth=dict(
edit_others=can_edit_others,
delete=can_delete_charts,
),
)
app.config['JSONDASH'] = charts_configSee below for the supported types and their details. Authentication typesedit_global This determines if a user can create OR update a chart with the "global" flag set, which will show the dashboard to all users if the appropriate application flags are set (see global config flags below) If no flag is set for allowing global dashboards, then this option will not be available. delete Allows deleting of charts. clone Allows cloning of charts. update Allows updating of charts. create Allows creation of new charts. view Allows viewing of a chart. The provided function will be passed the edit_others Allow editing of other creators' charts. The provided function will be passed the Metadata configurationMetadata can be added to the json configuration for further customization purposes. All arbitrary values will expect an accompanying function to be populated with, in the exact same way as the auth functions listed above. They will all be namespaced under the Below is an example of how you can override these fields with your own arbitrary functions. Note: by default, none take arguments. This may change for specific types. charts_config = dict(
metadata=dict(
created_by=get_username,
),
)
app.config['JSONDASH'] = charts_configThe following metadata overrides are used, but you can also add arbitrary keys and values, which will be saved to the dashboard config, just not necessarily used here. created_by This is used to organize views on the front-page by user, if there is such a key present on the configuration. This key is updated and saved if present, null otherwise. user This is the current logged in user. This is required for filtering dashboards by user. You must also set the Global config flagsBelow are global app config flags. Their default values are represented in the example working Python code.
Static asset config optionsBy default, all assets (css/js) will be loaded remotely by popular CDNs recommended for the given charting library. However, you might want to ensure assets are always available, or cannot access them because of network/proxy issues. If you would like to use your own local assets specified inside of the settings.py file, you can download them, put them in your app somewhere, and then tell jsondash where they should be loaded from (using the standard flask Just add a app.config['JSONDASH'] = dict(
static=dict(
js_path='js/vendor',
css_path='css/vendor',
)
)With default flask static settings, this would resolve the url to You can use one or the other, but it's recommended to use both or none. Jinja template configurationThe following blocks are used in the master template:
You can just check out the example app to see how it all should work. JavaScript configurationCustom callbacksWhile the point of jsondash is to make front-end coding completely unnecessary, and use serializable declarative configurations for making dashboards, sometimes you need to do one off stuff that requires scripting. A callback module exists to allow this very easily without getting in the way of existing configurations. You can customize individual charts by adding your own javascript files alongside your existing app that uses this blueprint and then register call backs on a per-chart id basis. All callbacks will be run in the order you register them, after the chart has been loaded and rendered completely. To get started: override the template block in your template to allow javascript to be executed, and register a callback with your own arguments. {% block jsondash_api_scripts %}
<script>
jsondash.api.registerCallback('my-chart-guid', function(container, config, myargs){
console.log('Running FIRST callbacK!');
console.log(myargs[0]);
console.log(myargs[1]);
container.style('background-color', 'green');
console.log(config.guid);
}, ['all', 'my', 'optional', 'arguments']);
// Register a second one, which runs after.
jsondash.api.registerCallback('my-chart-guid', function(container, config){
console.log('Running SECOND callbacK!');
});
</script>
{% endblock %}All callbacks will be passed the following arguments order:
To see a list of all your callbacks by chart, you can call Custom eventsSeveral events are triggered throughout the process and can be listened to by your own callbacks, or just other code you have embedded in your application:
See all events in app.js under VersioningThis project uses semantic versioning for releases. However, the master branch is considered to be unstable as it represents "bleeding edge", with updates, hotfixes, etc... which will eventually get tagged with a release. If you want to use a stable version, make sure to pin the specific release you want to target. FAQsQ: "Why'd you choose to expose library X, Y, or Z?" A: I tried to go for libraries that are pretty widely known and popular. If you are dissatisfied with what's exposed, you can always add your own by embedding any js/css and html in a template, and loading it through the Q: "How do I customize X, Y, Z?" A: Because of the level of abstraction used here, a lot of charts will naturally be less configurable than if they had been scripted by hand. This is the tradeoff with being able to quickly setup a lot of charts easily. The goal here is to use intelligent defaults as much as possible, and then allow the most universal aspects to be customized through a common interface. However, you can inject raw json-friendly configurations if your chart has the Keep in mind, many stylistic customizations can be overridden in css, since most all charts are html and/or SVG. And, as mentioned above, you can always use override option, or the iframe/custom option and make your Q: "When exposing metadata, why don't you just use the A: One way this can be done is using the Tips & tricksUsing the included data utilsCheck out data utils for more. Loading example dashboards config automaticallyRun Using endpoints dynamicallyBecause the chart builder utilizes simple endpoints, you can use the power of REST to create more complicated views. For example:
could return
could return Using shared data for performance and simplicity.Data from a single source can be shared amongst N charts using namespaced "keys" in the payload. See the shared data section and visit an example configuration here for more. Generating test dataIncluded are CLI utilities for generating fake charts, etc. You will need to run them like a python package due to their relative import style which is required for py2/p3 compatibility. To run, for example, the model factory generator, run
全部评论
专题导读
上一篇：dennyzhang/kubernetes-yaml-templates: Kubernetes Yaml Templates发布时间：2022-07-09下一篇：nst/JSONTestSuite: A comprehensive test suite for RFC 8259 compliant JSON parser ...发布时间：2022-07-08热门推荐
热门话题
 阅读排行榜
|
请发表评论