I've added MathJax equation numbering to my xaringan slides, but the \eqref{} (or \ref{}) link takes me back to the first slide. I want to disable the link and remove the link colouring from the reference.
My .Rmd
---
title: "MathJax test"
output:
xaringan::moon_reader:
includes:
in_header: "mathjax-equation-numbers.html"
lib_dir: libs
---
\begin{align}
\bar{x} = \frac{1}{n}\sum_{i=1}^{10} x_i \label{my-eq}
\end{align}
An example of an equation is \eqref{my-eq}. Or \ref{my-eq}.
My attempt at a solution (not working) in the mathjax-equation-numbers.html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
"HTML-CSS": {
styles: {
".MathJax a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
".MathJax_Preview a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
}
}
});
</script>
Try replacing the content of mathjax-equation-numbers.html with below.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
});
</script>
<style>
.mjx-mrow a {
color: black;
pointer-events: none;
cursor: default;
}
</style>
Related
So what Im trying to do is to change the color of the values inside the bars of a Bar chart. I have tried all options and also have a pen where it doesnt seem to work: https://codepen.io/vbbalaji/pen/oNbwbpm
[![Bar Chart][1]][1]
[1]: https://i.stack.imgur.com/a8lE7.png ]
There are two problems here:
You need to include the chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0.
Your datalabels options should be nested within the key plugins.
Here's the corrected config:
{
type: "horizontalBar",
data: {
labels: ["Red", "Amber", "Green"],
datasets: [
{
backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
data: [2, -4, 6]
}
]
},
options: {
legend: { display: false },
title: { display: true, text: "Health Variance" },
plugins: {
datalabels: {
color: "blue",
labels: {
title: { color: "blue", font: { weight: "bold" } },
value: { color: "green" }
}
}
}
}
}
It looks like this:
Here's your updated codepen: https://codepen.io/typpo/pen/oNbwxvK
In Tabulator, how can I make the horizontal alignment of column headers match the column data, or perhaps manage them individually. A column of centered data looks odd with a left-aligned header.
I am very new at this but I have been through the Tabulator info pages, the bitbucket pages, and searched here. It seems like there might be some way by creating some formatter functions but that seems very obscure for such a basic function.
Thanks, Sam.
there is now an available property for each column:
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name", headerHozAlign:"right"}, //right align column header title
],
});
Use CSS
.tabulator-col-title {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css">
</head>
<body>
<div id="example-table"></div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
</body>
</html>
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150,
align: "center"
},
{
title: "money",
field: "money",
align: "left",
formatter: "money",
align: "center"
},
{
title: "Favourite Color",
field: "col",
align: "center"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
]
});
const setAlignment = function(index, alignment) {
$($('.tabulator-col-title')[index - 1]).css("text-align", alignment);
}
.tabulator-col-title {
text-align: center;
}
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="example-table"></div>
<button onClick="setAlignment(4,'right')">Set Alignment</button>
</body>
</html>
As provided by dota2pro, .tabulator-col-title { text-align: center; } achieves bulk alignment of headers. And the solution provided for specific columns also works.
use the following property in the column definition to center the header individually (e.g. centered):
title:'test',
field:'myfield',
titleFormatter: function(cell, formatterParams, onRendered)
{cell.getElement().style.textAlign='center'; return ''+cell.getValue()}
(tested with Tabulator 4.5)
In a custom content type (employees) I have a body field.
In lib\modules\employees\index.js
addFields: [
{
name: 'body',
label: 'Beskrivelse',
type: 'area',
options: {
widgets: {
'apostrophe-rich-text': {
toolbar: ['Bold', 'Italic', 'Link', 'Unlink']
}
}
}
}
]
And in lib\modules\employees-widgets\views\widget.html
{{ apos.singleton(piece, 'body', 'apostrophe-rich-text', {
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
})
}}
Editing directly on the page shows the rich text field with toolbar and preview. But in the admin view the toolbar shows, but the preview is not working at all. Look at the images linked bellow:
It looks like this when editing on the page
It looks like this in the admin view
Apostrophe's admin modal CSS is reset, so rich text areas in the modal do not reflect project level styles. This is in an attempt to keep project level styles from interfering with important Apostrophe UI.
You could always add those admin scopes to your project level CSS, just be aware of its reach.
If anyone should have the same question, Stuarts answer is correct (of course). Here is what I added in lib\modules\apostrophe-assets\public\css\site.less to make it work for me. You might want to add more options or adjust to taste :)
.apos-ui {
.apos-rich-text {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.3em;
}
h1,
h2,
h3 {
margin: 1em 0;
font-weight: bold;
}
p {
margin-bottom: 1em;
}
a {
color: darkblue;
}
strong,
b {
font-weight: bold;
}
i,
em {
font-style: italic;
}
}
}
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>