We Keep Coding

How to customize Storybook's UI?

I'm trying to customize the way Storybook's UI looks and behaves, by customizing a manager.js file placed into the /.storybook folder, following their documentation :
// .storybook/manager.js
import { addons } from '#storybook/addons';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
enableShortcuts: true,
showToolbar: true,
theme: undefined,
selectedPanel: undefined,
initialActive: 'sidebar',
sidebar: {
showRoots: false,
collapsedRoots: ['other'],
},
toolbar: {
title: { hidden: false },
zoom: { hidden: false },
eject: { hidden: false },
copy: { hidden: false },
fullscreen: { hidden: false },
},
});
I'm changing some parameters, nothing changes on the UI. I even tried setting the theme to dark for it to be obvious, nothing happens. The server refreshes correctly, I even tried to restart it.
I'm running Storybook 6.5.14 on localhost in a react app, the dependencies "#storybook/theming": "^6.5.15" and "#storybook/addons": "^6.4.22" are installed.

Tradingview Simple Moving Average widget configure

I am using trading view simple moving average (20,44,100,200) using below code.
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_e2cd6"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">BTCUSDT Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:BTCUSDT",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"studies": [
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 20
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 44
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
}
],
"container_id": "tradingview_e2cd6"
}
);
</script>
</div>
<!-- TradingView Widget END -->
However i want to change moving average line color and line width for different average, so i tried with studies_overrides function with different inputs but it seems its not working.
Example: I want to change line color to white for 20 days moving average so i tried below code
"studies_overrides": {
"moving average.lineStyle.color.0": "#ffffff", //Not working
"simple moving average.lineStyle.color.0": "#ffffff", //Not working
"MASimple#tv-basicstudies.lineStyle.color.0": "#ffffff", //Not working
}, //Same on 'lineWidth: 2' not working
any one know how to change color and line width properly?
Ref: https://static.kancloud.cn/isung/tradingview/972246, https://static.kancloud.cn/isung/tradingview/972244

Try like this,
You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.
"studies_overrides": {
"moving average.ma.color": "#2A2E39",
"moving average.ma.linewidth": 2,
},

how to override the studies of the tradingview widget

I am trying to customize a trading view widget without success, I want to change the color of the RSI Indicator, and change the levels, this is the code:
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies_overrides": {
"rsi.rsi.plot.color": "#2196f3",
"rsi.level.0": 20,
"rsi.level.1": 80
},
"studies": [
"RSI#tv-basicstudies"
],
});
Thanks in advance

I have this code working just right. Perhaps you can use to find the error.`
var studies = [
{
id: "IchimokuCloud#tv-basicstudies",
version: 2.0
},
{
id: "BB#tv-basicstudies",
inputs: {
length: 25
},
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 50
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 9
}
},
{
id: "RSI#tv-basicstudies",
},
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
];
var chart1 = new TradingView.widget(
{
autosize: true,
symbol: "OANDA:EURUSD",
interval: "3",
timezone: "America/Bogota",
theme: "dark",
style: "1",
locale: "en",
hide_side_toolbar: true,
hide_top_toolbar: false,
enable_publishing: false,
allow_symbol_change: true,
details: false,
hidevolume: true,
studies: studies,
container_id: "tradingview_1"
}
);
Hope it is useful.

the correct way to do it is, like the example below
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies": [
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
]
});
You can set inputs of any indicator like this, but I do not know how to change default styles of the indicators. Maybe you know.

Use the following code to customize RSI oscillator.
"studies_overrides": {
"relative strength index.rsi.color": "#2196f3",
"relative strength index.upper band.color": "#2100f5",
"relative strength index.lower band.color": "#2100f5",
"relative strength index.upper band.value": 80,
"relative strength index.lower band.value": 20,
},
"studies": [
"RSI#tv-basicstudies"
]

for example in tradingview constructor:
new Tradingview.widget({
overrides: {
"paneProperties.background": "#ffffff"
},
studies_overrides: {
"volume.volume.color.0": "#00FFFF",
}
})
Normally I would add more about the solution, but the library isn't open source and its licensing terms might prohibit reproducing any of its documentation.

Trying to edit the width of column in exported excel sheet Dojo.grid.enhancedGrid

I'm trying to increase the width of the exported Excel sheet in the dojox.grid.enhancedGrid.plugins.Exporter, but it seems that I can't find that kind of info in the documentation.
Here's the code for the grid that I'm trying to edit.
var tableGrid = new EnhancedGrid({
id: "reportData",
structure: layout,
autoWidth: true,
autoHeight: true,
noDataMessage:"No data found",
plugins: {
printer: true,
exporter: true,
pagination: {
pageSizes: ["10", "50", "100", "All"],
defaultPageSize: 50,
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 4,
position: "top"
}
}
},this.ReportData).startup();

The width of the Tablecells can be managed with via the Layout of the Grid like this:
var layoutMP = [[
{name:"Field1", field: "fieldName",'width': '150px'},
{name:"Field2", field: "fieldname2",'width': '100px'},
{name:"Field3", etc....}
]];
This will be addopted by the export.

how to create a custom drop-down in the toolbar of quill.js

I am using quill.js to create an editor in my project.Hitherto,i have successfully integrated quill with my web-project.Now what i want to do is create a custom dropdown in the quill toolbar.The dropdown will have following options
1)Email
2)Simple Meeting Description
When Email-Option is selected,the editor loads a Email Template etc.
Can anyone help me in achieving this....
below is my code
var toolbarOptions=
[
['bold','italic','underline','strike'],
['blockquote','code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
];
var quill = new Quill('#editor', {
theme: 'snow',
placeholder: 'Compose an epic message...',
readOnly: false,
modules: {
history: {
delay: 2000,
userOnly: true
},
toolbar: {
container: toolbarOptions,
handlers: {
undo: function(value) {
this.quill.history.undo();
},
redo: function(value) {
this.quill.history.redo();
}
}
}
}
});

From a quick look at the Quill documentation, it doesn't appear that Quill by itself allows for custom additions to the toolbar, though that doesn't mean you can't do it.
The easy way to do it would be to use javascript to manually insert the dropdown into the toolbar the same way you would insert any element inside another element. Also, bind an onchange handler (see: Dropdown using javascript onchange ) to the dropdown so that it interfaces with quill and sets the contents to be the predefined Delta object that you want.
You can look up the delta object you want to create by first writing it out in a normal Quill editor and then calling quill.getContents() and then converting that to JSON. Then you set the contents after the dropdown change to the Delta you have precomputed through the above method by calling quill.setContents() (http://quilljs.com/docs/api/#setcontents).