Background
I'm using tiptap-vuetify to implement a message/chat UI where users see an editable Tiptap instance for creating new messages as well as several uneditable Tiptap instances (one for each already-sent message in the thread the user is viewing).
I have the editable instance output data in JSON format, which I store in my database in a JSONB field.
Problem
When I load the JSON for sent messages from the database, only plaintext messages show up; if I applied any kind of styling (bold, italics, lists, etc.), nothing at all shows up.
The code I'm using for the uneditable Tiptap instances is this:
<tiptap-vuetify
v-model="message.content"
:editor-properties="{ editable: false }"
output-format="json"
/>
Here's a screenshot of the message object (and message.content) for the "bold asdf" example above:
When i was looking in the documentation -> Get started
I see that the content is HTML.
As it usually is inside any tiptap.
Your content data is an object with alot of nested data. I don't think the plugin/component can handle that type of format.
Try save your data as HTML to your .json and there for also fetch the data as HTML from your .json.
Example:
{
messages: [
{
"id": 1,
"content": "<p>foo bar</p>"
},
{
"id": 2,
"content": "<p>hello world</p>"
},
]
}
(New to answer questions on stackoverflow)
I figured out the fix:
I didn't realize I needed to include the :extensions prop for all of the HTML features I wanted to use (bold, italic, etc.) in the editor that would render the HTML. I thought those extensions were just used to add the toolbar buttons, but they are also used to render the JSON that those buttons produce.
To then hide the toolbar, I just used the example toolbar-slot code from the readme, and the toolbar was gone.
Here's the working code:
<tiptap-vuetify
v-model="message.content"
:extensions="extensions"
:editor-properties="{ editable: false }"
>
<template #toolbar="{ buttons }">
<pre>{{ buttons }}</pre>
</template>
</tiptap-vuetify>
Is there a way to tell oxyplot to use the x value as the connect/draw order for a line plot instead of the order that the points are added?
Let's assume I have this huge amount of points (2Gb in RAM) of a time series. At a higher level I am only adding a small percentage of those points and as the user zooms into a more specific region I add more points to the series so he can see more detail. Almost like a texture mimap. I can add all the points at once but then oxy becomes really slow when I tries to render all those points in a single window in WPF Maybe there is another solution here?
The problem that I am facing is that oxy draws a line from the last point in the graph to the first one of the new batch because it uses the series points list as the draw order not the X value. Is there a way to change this?
Here is a tiny example based on the 'WPF Simple Example':
var plotModel = new PlotModel { Title = "Simple example", Subtitle = "using OxyPlot" };
var timeAxis = new DateTimeAxis
{
Position = AxisPosition.Bottom,
StringFormat = "hh:mm:ss",
};
plotModel.Axes.Add(timeAxis);
var now = DateTime.UtcNow;
// Create two line series (markers are hidden by default)
var series1 = new LineSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now), 5));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(1)), 7));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(2)), 8));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(0.5)), 10));
// Add the series to the plot model
plotModel.Series.Add(series1);
// Set the Model property, the INotifyPropertyChanged event will make the WPF Plot control update its content
this.Model = plotModel;
Here is the output, note that the line draws "back in time":
Is there a solution that does not involves me sorting the points list (not even sure if this works)?
Or maybe I am doing this extra points for details thing completely wrong :)
I have been trying to plot a bubble chart using zingchart library. I did not find any option by which we can make bubble radius value independent of y-axis scale. For example in googlecharts bubble radius does not depend on y-axis scale (observe that in given example fertility rate is in single digits where as population(bubble size) is in millions). If we try the same example on zingchart, chart will be flooded since bubble size considers y-axis scale. How to achieve this feature in zingchart?
I'm on the team here at ZingChart. There is an attribute you can use to adjust the bubble radius that is not dependent on "scale-y":{}. Here is some code that will be helpful.
{
"type":"bubble",
"plot":{
"max-size":200 */the "max-size": attribute accepts numeric values and will adjust the radius of the bubbles independently from the y axis values/*
},
"scale-y":{
"values":"0:20:5",
},
"series":[
{
"values":[[1,15,4],
[2,4,2],
[5,10,1],
[6,7,3],
[3,6,2],
[7,15,1],
[8,2,4],
[1,7,3],
[2,12,3],
[4,4,4],
[5,1,2],
[6,3,1],
[8,16,2]]
},
{
"values":[[3,5,1],
[2,17,2],
[8,8,3],
[4,6,2],
[7,3,4],
[2,12,1],
[1,4,1],
[6,2,2],
[4,10,3],
[6,14,2],
[2,6,2]]
},
{
"values":[[3,11,4],
[6,7,4],
[8,14,3],
[3,2,3],
[5,5,2],
[7,10,2],
[2,1,1],
[7,4,1],
[6,16,2],
[1,8,3],
[5,14,1]]
}
]
}
I have an metro style app which has a few tiles in the home page in some random order. If I remove one of those tiles all the other tiles should rearrange themselves to fill the gap created by removing a single tile. You can observe the same phenomenon in Windows 8 desktop view. Is it possible to achieve it using either WinJS or WinRT.
If I correctly understood your needs, if you use a ListView or a GridView which is bound to an IObservableCollection, the items will automatically fit correctly when deleting / adding items.
Using IObservableCollection (or ObservableList) allow you to add a ChildrenTransitions (Choose the AddRemoveTransitions to automatically add the "correct" animation for adding / removing item.
I have not tested this in JS/Html, but in Xaml/C# it's working great.
You can do it by modifying the ListView data source directly.
For example,
// create a reference of your data source so that it can be accessed
// when you need to modify it
var yourBindingList;
...
// code where you bind your data to your list view
yourBindingList = WinJS.Binding.List([{id: 1, name: 'one'},
{id: 2, name: 'two'}, {id: 3, name: 'three'}]);
var listViewControl = document.getElementById('yourListViewDiv').winControl;
WinJS.UI.setOptions(listViewControl, {
selectionMode: 'single',
itemDataSource: yourBindingList.dataSource,
itemTemplate: yourItemTemplate,
});
...
// code where you remove the first item in your list view
yourBindingList.splice(0, 1);
Hope this helps.
I am working on dojo pie chart. When I feed data to the chart as
[ {y:10}, {y:40}, {y:30}]
I want to see the values displayed on the chart as 10%, 40% and 30%. But the chart displays as 12.5%, 37.5% and 50%. What should I do, to enable the pie chart display the values, which I send as it is?
Any help is appreciated
The solution is simple: set labels as you want them: [{y: 10, text: "10%"}, ...] and so on. You can easily automate it. A sketch:
var items = [10, 40, 30];
addSeries("default", dojo.map(values, function(item){
return {y: item, text: item + "%"};
});
The same way you can add custom tooltips, or some other attributes (e.g., colors).