I am using related Shield UI ASP.NET Charts on a web page. What I need is to be able to provide the user the option to choose whether to show the dataPointText or not. For that purpose I have put a checkbox below the second grid and am trying to use the following code:
detailChartElement.shieldChart($.extend(initialOptions, {
primaryHeader: {
text: headerText
},
if (document.getElementById("CheckBox1").checked == true){
seriesSettings: {
line: {
dataPointText: {
enabled: true,
borderColor: 'red',
borderWidth:3
}
}
},
},
but when I put the code and none of the grids on the page shows. I checked quite carefully the code but don’t see any missed out commas or anything that should prevent it from working.
The mistake you are making is not syntactical but conceptual. Within the code that creates the chart:
detailChartElement.shieldChart($.extend(initialOptions, {
}));
you may place nothing but the properties of the Shield UI ASP.NET chart and their properties. You may not have any logical checks like IF(). However you may have additional variables and their values.
With this in mind you could use the following workaround:
In the function you use to recreate the chart you place the following code:
var showlabels = document.getElementById("CheckBox1").checked;
Than, you put the series settings code in the chart creation routine:
seriesSettings: {
line: {
dataPointText: {
enabled: showlabels,
borderColor: 'red',
borderWidth:bordersize
}
}
},
The properties and values will be always there, however they will be enabled only when the checkbox is checked.
Related
With Symfony UX, in order to assure that a custom chart could be rendered, I started with the sample from documentation. The rendered page is effectively blank. In the browser's console is this string:
<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First dataset","backgroundColor":"rgb(255, 99, 132)","borderColor":"rgb(255, 99, 132)","data":[0,10,5,2,20,30,45]}]},"options":{"scales":{"y":{"suggestedMin":0,"suggestedMax":10}}}}"></canvas>
I interpreted that string to mean that the rendering process got as far as chart.js. But what later step(s) could prevent the chart from being fully rendered? Earlier step(s)?
assets\controllers.json:
{
"controllers": {
"#symfony/ux-chartjs": {
"chart": {
"enabled": true,
"fetch": "eager"
}
}
},
"entrypoints": []
}
package.json includes:
"devDependencies": {
...
"#symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets",
...
"chart.js": "^3.4.1",
...
}
../node_modules/chart.js/dist/chart.js: Chart.js v3.9.1
Thankfully(?), there are no discussions of Chart.js at the Mozilla forums. Applying the principle of pressing buttons until things change, I learned that the ad blocker I use was preventing the chart from being rendered. Why That, Firefox?
I'm using Storybook v5.2.6 and am trying to change the size of the grid lines shown in my stories.
After adding #storybook/addon-backgrounds a toggle grid button appears in my Storybook toolbar. Clicking the button plots a 20px grid:
I want to globally change the grid size to be 8px and I have tried the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
gridCellSize: 8,
grid: { cellSize: 8 }, // alternative approach
brandTitle: 'Hello, World!',
});
addParameters({
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I haven't been able to find any documentation on how to use this parameter globally, but it seems to be the correct approach because:
In the Storybook 'Kitchen Sink' repo, the gridCellSize parameter is set like this, along with other theme variables.
In PR #6252 the author makes a change to "Pick up gridCellSize from Theme configuration options"
So I thought my above attempt would work, however a 20px grid is still plotted.
In the release notes for Storybook 5.2.0-alpha.43 they mention the breaking change:
"Move grid toolbar feature to background-addon".
However, there are no migration instructions
So, the question is, how do I set the grid cell size?
Update
I've upgraded to Storybook 5.3.0-beta.19 and can now set the grid size on a story-by-story basis, but I'm still unable to set this globally.
Button.story = {
parameters: {
grid: { cellSize: 8 },
},
};
After trying various permutations, I've stumbled upon the correct configuration.
This works with Storybook 5.3.0-beta.19. I'm not sure about earlier versions.
Rather than setting the gridCellSize parameter in the theme, you need to add grid: { cellSize: 8 } to the configuration parameters. In your config.js file, do the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
brandTitle: 'Hello, World!',
});
addParameters({
grid: { cellSize: 8 }
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I'm developing a new tab replacement extension for Google Chrome and I'd like to allow the user to customize the background, to do so I'm using the storage.sync API as suggested by this page.
The problem is that the style changes are applied asynchronously, so the default background (white) is briefly used during the page load resulting in unpleasing flashes.
Possible (unsatisfying) solutions are:
do not allow to change the background;
hard code a black background in the CSS (and move the problem to custom light backgrounds);
use a CSS transition (still super-ugly).
What could be an alternative approach?
Follows a minimal example.
manifest.json
{
"manifest_version": 2,
"name": "Dummy",
"version": "0.1.0",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"permissions": [
"storage"
]
}
newtab.html
<script src="/newtab.js"></script>
newtab.js
chrome.storage.sync.get({background: 'black'}, ({background}) => {
document.body.style.background = background;
});
I come up with a reasonable solution. Basically since the localStorage API is synchronous we can use it as a cache for storage.sync.
Something like this:
newtab.js
// use the value from cache
document.body.style.background = localStorage.getItem('background') || 'black';
// update the cache if the value changes from the outside (will be used the next time)
chrome.storage.sync.get({background: 'black'}, ({background}) => {
localStorage.setItem('background', background);
});
// this represents the user changing the option
function setBackground(background) {
// save to storage.sync
chrome.storage.sync.set({background}, () => {
// TODO handle error
// update the cache
localStorage.setItem('background', background);
});
}
This doesn't work 100% of the times but neither do the simple:
document.body.style.background = 'black';
So it's good enough.¹
¹ In the real extension I change the CSS variables directly and I obtain much better results than setting the element style.
I would like to change the standard "pen" icon of the
StandardListItem of type DetailAndActive
. Is there a way to do so?
my XML so far:
<List
id="master1List"
items="{/path}"
mode="{device>/listMode}"
select="onSelect"
itemPress="showDetail"
growing="true"
growingScrollToLoad="true">
<items>
<StandardListItem
type="DetailAndActive"
activeIcon="sap-icon://message-information"
id="master1ListItem"
press="onSelect"
title="{title}">
</StandardListItem>
</items>
</List>
As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:
.sapUiIcon:before {
content: attr(data-sap-ui-icon-content);
...
Thanks..
[EDIT:]
I accepted the below answer as correct because it works. BUT as you can read in my comment, I'd like to make it possible to accept Controls by using the aggregations metadata like described here:
metadata: {
aggregations: {
"Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
},
defaultAggregation: "Button"
},
This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?
The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.
sap.m.StandardListItem.extend('my.StandardListItem', {
renderer: {},
constructor: function(sId, mProperties) {
sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
var sURI = sap.ui.core.IconPool.getIconURI("action");
this._detailIcon =
new sap.ui.core.Icon({
src:sURI})
.setParent(this, null, true)
.addStyleClass("sapMLIBIconDet");
}
});
There is a working example at http://jsbin.com/tuqufe/1/edit?js,output
The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.
[EDIT:] Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...
sap.m.StandardListItem.extend('my.StandardListItem', {
metadata: {
properties: {
"detailIcon": "string"
}
},
renderer: {},
setDetailIcon: function(icon) {
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
}
});
There is a sample at http://jsbin.com/bayeje/1/edit?js,output
The Mystique theme includes two files that need to be updated to allow a custom styles section. The addition of a "small caps" style for use in the correct formatting of law journal citations. What is the steps to add a "small caps" style for the TinyMCE Advanced editor to use the style in the "Styles" dropdown tool in WordPress.
Using TinyMCE 4, the following custom setup function will add a SmallCaps control:
setup: function (ed) {
//Adds smallcaps button to the toolbar
ed.addButton('smallcaps', {
title: 'Smallcaps',
icon: 'forecolor',
onclick: function (evt) {
ed.focus();
ed.undoManager.beforeChange();//Preserve highlighted area for undo
ed.formatter.toggle('smallcaps');
ed.undoManager.add();//Add an undo point
},
onPostRender: function () {
var ctrl = this;
ed.on('NodeChange', function (e) {
//Set the state of the smallcaps button to match the state of the selected text.
ctrl.active(ed.formatter.match('smallcaps'));
});
}
});
}
The answer given by Goetz is not complete, since TinyMCE does not know about your "user defined format" if you don't define it explicitly. Maybe it did some years ago, but version 4.7.x doesn't seem to do so. Add the code below in addition to his answer (it maybe needs to be bevore setup):
formats: {
smallcaps: {
inline: 'span',
styles: {
'font-variant': 'small-caps'
},
attributes: {
title: 'smallcaps'
}
},
},
toolbar: 'smallcaps_button'
I prefer naming the formats and buttons slightly differently by suffixes like _button or _format, but that actually should not be a problem. Hence it avoids forgetting about to correctly define all needed parts here (format, toolbar, ed.addButton()). So, my toolbar contains the button smallcaps_button and the function is ed.addButton('smallcaps_button')
That's it.