When I use the JavaScript On Screen Menu example, the button of OnScreenMenuButtonType doesn't show the icon - lightningchart

I don't know why, the example in the document can display the icon, but the one I wrote does not display
enter image description here
this.SpecChart.addOnScreenMenu(
[
[
// Default buttons
OnScreenMenuButtonType.ZoomInX,
OnScreenMenuButtonType.ZoomOutX,
OnScreenMenuButtonType.ZoomInY,
OnScreenMenuButtonType.ZoomOutY,
OnScreenMenuButtonType.ZoomToFit,
OnScreenMenuButtonType.ToggleAnimations,
// cusrom button
{
dimensions: { rows: 1, columns: 1 },
label: "Show Heatmap",
opacity: "1",
color: "blue",
shape: OnScreenMenuButtonShape.RoundedRectangle,
action: this.show,
},
],
],
OnScreenMenuButtonShape.RoundedRectangle
);

Probably this is caused by LightningChart not having access to its resources folder. The OnScreenMenu pictures are distributed in a resources folder along with the library, but the library itself doesn't know where it is located.
Here's a link to the related item in API documentation to learn more: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/interfaces/lightningchartoptions.html#resourcesbaseurl
A quick and dirty fix you can try is the following code snippet which tells LightningChart to look for the resources folder from a CDN service - this is super slow and I would not advise to do this in any long term solution.
const chart = lightningChart({
resourcesBaseUrl: "https://cdn.jsdelivr.net/npm/#arction/lcjs#3.4.0/dist/resources",
}).ChartXY();
// ... add OnScreenMenu inside the chart ...
For a long term solution, you'll have to download the resources folder to your project, setup a file server and supply the URL to the file server with resourcesBaseUrl option.

You have set: this.show. Is it not just show. And by the way. Where is your icon property by custom button?
The last one is a custom button. My question is that the first few yellow buttons do not display icons.I know custom button can set icon url
as you can see in the image

Related

How do I change markdown heading color by heading level in VS Code editor?

My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:
Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor
Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels
Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.
Help is very appreciated.
There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:
Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#9cecfb",
"fontStyle": "bold",
}
},
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#83a4d4",
}
}
]
}
I faced the same issue and find a way with the VSCode extension "Markdown header coloring"
Basically you have to
install the extension
set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
do not forget to reload the window after each modification: open Command Palette → type Reload window
Cheers

Anonymous script firing with each pageload gtm.js and seems like a hack

I seem to be experiencing an issue where a random third party script keeps executing with each pageload on my site. I have a lot of pageview and event tracking in place and all of that is managed via GTM.
Script --
setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);
The above third party script is injecting an empty document inside the header tag. The body and the header of the doc is completely empty.The query parameter in the injected doc keeps changing.
Has anyone else has experienced this issue in the past? Any ideas what this could be?
I also have a lot of customjs variables in GTM - I wanted to see if I could search for this piece of code in one of the custom js variables - anyone knows if there is an easy way to search through all variables without going into each one at a time?
Any help is greatly appreciated.
You can Export your container as JSON file:
In Google Tag Manager, navigate to the desired container.
In the top navigation, go to Admin and then Export Container.
Select the desired container version from the selector.
Preview and confirm your export file and click Download.
(link to source: https://support.google.com/tagmanager/answer/6106997?hl=en)
Once you donwlaod the JSON file open it in any text editor and search for the code, or simply search just for the specific domain in the tag e.g. "dnn506yrbagrg.cloudfront.net". The name name of the Tag or Variable will appear in the corresponding object.
For example you should see something like this (if the code is in html tag):
...
"tag": [
{
"accountId": "001",
"containerId": "123",
"tagId": "3",
"name": "THIS IS THE NAME OF YOUR TAG",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);"
},
...
According to this documentation this seems to be the tracking code for Crazy Egg (heat maps and scroll maps) - the cloudfront URL matches. The parameter keeps changing because it's a random number generated by javascript to prevent caching.
This is obviously not part of GTM. Either you have configured this yourself in GTM or somewhere in your website, or you include a marketing tag (via custom HTML) that load Crazy Egg (which without a contract and a data processing agreement would be unethical and in many jurisdictions illegal).

Increase Number Size in Charts

I'm doing a report using Qliksense but when using a proyector you can barely see the numbers on the graphs.
Any ideas on how to modify the code of the program to increase number/text size overall?
A possible way to do that would be to use the themes in QlikSense. Yet they have limited functionality, but they may be able to help in your case.
You will have to go into your QlikSense themes directory, mine is under C:\Users\user\AppData\Local\Programs\Qlik\Sense\Client\themes. Here you will find the default themes (you can also create your own ones).
Create a copy of the folder sense which is the default theme (let's name this new folder senseModif from now on). Open the file theme.json from the new directory and play around with the values. For example if you want to set text sizes in a pie chart you can modify this segment:
"pieChart": {
...
"item": {
"name": {
"fontSize": {
"default": "50px",
"large": "50px",
"medium": "50px",
"small": "50px",
"tiny": "50px"
},
...
I already changed the fontSize values here for 50px. To see the result of this just go to the QS web interface, open your app, and open a sheet in it. You will have a similar url for the app: http://localhost:4848/sense/app/filenameofapp.qvf/sheet/GPUNXF/state/analysis/. Now just put theme/senseModif at the end of the url and it will now display the objects with your new styles.
As I said, at least for me, it's not working for every object type right now, but at least it's a start.
Much more on the themes and on their usage can be found here.

How to remove websphere portal UI CSS

We are developing a website using websphere portal 8. Is there a way to prevent the portal to integrate the portal CSS in the mashup files that are being served on a page request? The CSS contains all the lotus ui styles we do not use on that website.
Yes, you can. Portal 8 Theme has different profiles, you should understand profile like 'how many js/css/other portal staff' is loaded on the page. You can say page use light profile. To set profile to page you should open page properties and set property
resourceaggregation.profile=profiles/profile_lightweight.json
But even in that case you'll see portal css that you do not want to see.
All profiles json files located in static part of your theme theme/static/themes/Portal8.0/profiles
By default there are 4 files
profile_admin.json
profile_deffered.json
profile_full.jon
profile_lightweight.json
I suppose you able to create your own profiles.
If you take a closer look at this profiles you'll see what modules this profiles brings to page, for example lightweight profile
"moduleIDs": [
"wp_theme_portal_80",
"wp_portlet_css",
"wp_one_ui",
"wp_one_ui_dijit",
"wp_legacy_layouts",
"wp_client_ext",
"wp_status_bar",
"wp_theme_menus",
"wp_theme_skin_region",
"wp_theme_high_contrast",
"wp_layout_windowstates"
],
In your case you interested with wp_theme_portal_80 - how to know what this module contains?
To know it you should open contributions directory and lookup theme.json file. Open it and you'll see next
"modules":[{
"id":"wp_theme_portal_80",
"prereqs":[{
"id":"wp_client_main"
},{
"id":"wp_client_ext"
}],
"contributions":[{
"type":"head",
"sub-contributions":[{
"type":"js",
"uris":[{
"value":"/js/head.js"
}]
}, {
"type":"css",
"uris":[{
"value":"/css/master.css"
}, {
"value":"/css/masterRTL.css",
"type":"rtl"
}]
}]
}]
},
This files will we included in your html markup if you use lightweight profile. I suppose now it is clear how to avoid portal css on the page - just edit profile json/create own profile/edit theme.json Be careful to broke default portal theme if you'll be modify theme.json or default profiles
Hope it will helpful for you.

Is it possible to add a section with some informtion in browser using crossrider?

I am trying to develop an extension which will show some information(about 15 words) in a small section below the extensions icons in the browser using crossrider?. I searched about it and it seems that browser only supports extensions icons and bookmarks. So is it possible to add such kind of section?? Im new to browser extension development and not sure about its possibility.
The nearest you can get to this is to use a browser action/button and use the tooltip (a.k.a. title) to display the information when the mouse hovers over the button. For example, in your background.js file your code would look something like:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icons/icon.jpg');
appAPI.browserAction.setTitle('Information displayed on mouse hover');
appAPI.browserAction.onClick(function() {
alert('Hello world!');
});
});
For more information, see appAPI.browserAction.
[Disclosure: I am a Crossrider employee]

Resources